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>
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.
Read Also: jQuery bind() and unbind() – attaching event handlers
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.
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
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.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.
If you are in a financial crisis , or need to start a new business…
Hormonal balance plays a pivotal role in overall well-being, influencing various aspects of health, from…
Dog walking is an excellent way to maintain your furry friend's camaraderie and provides many…
Introduction Businesses understand the diverse requirements of mobile applications, which provide a competitive advantage. There…
The Internet of Things (IoT) has recently changed the world. It links gadgets together and…
NFTs, or Non-Fungible Tokens, are revolutionizing the digital economy. These unique digital assets, authenticated through…