jQuery 1.7+ .on() vs .live() Review

I was recently watching a recording of jQuery summit 2011, I think it was Adam Sontag who was suggesting to use new functions called .on() and .off() event handlers instead of .live(). After using .live() quite regularly over the past few years i wanted to see the main differences and consider using the new functions .on() and .off() recently added in jQuery 1.7.

Let’s look at the functions and how they work.

jQuery .live()

Attach an event handler for all elements which match the current selector, now and in the future.

source: http://api.jquery.com/live/

When .live() came to existence a few years ago it was the “dogs balls!”. Finally, we can attach events to elements that are inserted dynamically into the DOM. .live() does a great job in providing this feature. However, as things go, jQuery is continuously evolving and now we’re seeing some new kids on the block. See demo of .live() function.

jQuery .on()

Attach an event handler function for one or more events to the selected elements.

source: http://api.jquery.com/on/

This brings us to a few questions.

What is wrong with .live()

Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():

1. jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
2. Chaining methods is not supported. For example, $(“a”).find(“.offsite, .external”).live( … ); is not valid and does not work as expected.
3. Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
4. Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.
5. The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind(“click”) removes all click handlers attached by any call to .live()!

Whats the main differences between .live() and .on() functions?

Functionality: Instead of bubbling up the body and document level it is directly registered against the document.

Usage:
If we look at the 3 main event attachment methods we can see that they are very similar. Noticably the .live() doesn’t have a selector parameter.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Performance: I was going to create a jsPerf test but found someone already did the hard work! Here are the results of the performance of .live() and .on(). As you can see, .on() outperforms it’s predecessor .live(), it’s almost 3 or 4 times as fast!

Will .on() work in earlier versions of jQuery?

As far as I know, the .on() function was only included in jQuery 1.7 it won’t work with earlier versions.

.off()

Remove an event handler.

This one is simple, it basically can be used to remove event handlers. A bit like the .unbind() event which removes event handlers previously attached to elements.

What’s the difference between bind() and on()?

If we take a look at the jQuery 1.7 source code we can see that bind() uses on() and unbind() uses off(). So essentially no difference and maintains backwards compatibility for earlier versions of jQuery.

//https://code.jquery.com/jquery-1.7.1.js
//line 3755
    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },

So to sum up, as suggested by the jQuery experts you should start using .on() and .off() instead of .live() for your next project developments.

Update 04/06/2012

As of jQuery 1.7 the .bind() and .live() functions are in fact alias to the .on() function. When you type in console: “jQuery.fn.bind.toString()” it will return: “function (a, b, c) { return this.on(a, null, b, c); }“.

Update 20/06/2012

$('selector').live(event, function(){ //do stuff here })

is now

$(document).on(event, selector, function(){ //do stuff here })