4 examples of jQuery on method to replace bind, live, delegate methods

What is the jQuery on() method?

The on() method of jQuery is used to bind or attach one or multiple event handlers to the specified elements. The bind() method is also used to attach events, however, this is outdated from 1.7 version of jQuery.

See on example to bind event

The $.On() method also replaces the live() and delegate() methods from version 1.7 onwards of jQuery. The On jQuery method is the preferred way that brought a lot of consistency to the API.

On for live method example

In the examples of this tutorial, you can see how the $.on method replaced the bind, live, and delegate methods with each method’s brief (if you do not know already).

Syntax of jQuery on method

Following is the syntax of on method:

$(selector).on(event,childSelector,data,event_handler)

Where

  • The Selector is parent element like a div, paragraph etc. in $.on method.
  • Event = The events to use come here e.g. click event, dblclick, mouseleave, mouseenter etc. If you are using multiple events, it has to be separated by spaces.
  • Data = optional parameter to pass data.
  • Function = As an event is triggered, this function will execute which is required.

Examples of using on() method

Following are a few examples of using the on method of jQuery.

Using on() as a replacement of bind() for single event

The bind method was used to bind or attach single or multiple events to the elements in jQuery. Now, this is replaced by $.on method.

Following example shows attaching a single event by using the on() method. As you double click the div element, an alert will be shown that binds the dblclick event.

jQuery on

Experience this example online

See also bind() method

Using on() method as replacement of bind() for multiple events

Following example binds or attaches multiple events (mouseleave and click). As you single click or leave the mouse after bringing in the div area, an alert will be shown.

Note that multiple events are separated by space in on() jQuery method.

jQuery on click

Experience this example online

Using $.on() example as replacement of live() method

As such, the live method is also removed from jQuery latest release and replaced by the $.on method. The live method was used to attach one or more events handlers to the specified elements. That applies to the current and future (child elements) as well. This can be done by using jQuery on() method.

Following example shows how to use On method as the replacement of the live() method. As you click on the text “Add new paragraph”, a child paragraph will be created. As you click both, the parent and child paragraphs, an alert will be shown.

No matter how many paragraphs you create, each new paragraph will also show an alert, just like the parent.

jQuery on live

Experience this example online

See also: live() method

Using on() as replacement of delegate() method

Following example shows how the $.On method can be used as a replacement for the delegate method. As such, the delegate method is just like the live method of jQuery except the delegate method attaches event handlers to child elements only.

We can use the On() method to attach event handlers to child elements only just like the delegate().

See the following example online that shows as you click “Click here to add new paragraph” div element, it will add new child elements of the parent div. If you click on child paragraph elements it will show an alert which is handled in jQuery On method.

See also delegate() method

Experience this example online

 

See Also jQuery off() method