Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

In this article you will learn the difference between bind vs live vs delegate vs on methods for adding event handlers to elements.

Developers are little bit confused about what the actual differences are between the jQuery .bind(), .live(), .delegate(), and .on() methods and how they should be used.

Let’s start with some common HTML markup.

<ul id="users">
<li>
<a href="javascript://" data-user="1">
John Doe
</a>
</li>
</ul>

Using Bind Method:

The jQuery .bind() method registers event type and an event handler directly to the DOM element.

For example,

$( "#users li a" ).bind( "click", function( e ) {} );
$( "#users li a" ).click( function( e ) {} );

In the above example, the .bind() method attach the event handler to all of the anchors which are matched.

Though, in various browser implementations, this methods works and it is quite easy and quick to wire-up but it has some disadvantages.

• For the same selector, bind doesn’t work for elements added dynamically.
• It can have performance issues on page load.

Read Also: jQuery bind() and unbind() – attaching event handlers

Using Live Method:

That method is deprecated now. Advantage of using live() is that it uses the concept of event bubbling.
The live() method attaches the event handler to the root level of the document along with associated selector and the event information. This can also respond to the events which are generated by dynamically added elements.

For example,

$( "#users li a" ).live( "click", function( e ) {} );

It has some disadvantages.

• This method is deprecated as of jQuery 1.7. So, you should stop this using.
• Chaining is not properly supported.
• Events always delegate all the way up to the document as this can affect performance if the DOM is very deep.

Using Delegate Method:

jQuery .delegate() method behaves in a similar way to the .live() method. But, instead of attaching the selector or event information to the document, you can choose where it is anchored. That is you can control on which node the events will be added. This can also respond to the dynamic element events.

For example,

$( "#users" ).delegate( "li a", "click", function( e ) {} );

Changing from a jQuery .bind() to a .delegate() method is not as straight forward way to migrate.

Read Also: Using Delegate and Undelegate in jQuery

Using On Method:

You can consider jQuery .on() method as being ‘overloaded’ with different signatures. This method attach the event handler function for one or more events to the selected elements. jQuery .on() function was included in jQuery 1.7 so, for early versions it will not work.

Read Also: Why use jQuery on() instead of click()

For example,

$( "#users li a" ).on( "click", function( e ) {} );
$( "#users" ).on( "click", "li a", function( e ) {} );

Sometimes, it can bring a confusion that the behavior changes depends on how you call the method.

Now, it’s time to review what we have learned so far i.e. we learned about bind(), use it when you have only a few elements. live() is no more as it is deprecated. delegate() is not a straight forward way to change your old code.
That new jQuery .on() method is mostly useful that can cover .bind(), .live(), or .delegate() depending on how you call it.