Why jQuery's "on" is better than "live"

Question

I'm seeing that more developers are now using $('#element-id').on() method instead of $('#element-id').live() method.

Why? What is has that live method doesn't have?

Answer 1

Event handlers bound with .live are bound to the document. Event handlers bound with .on are bound to an element you specify. That means you can reduce the amount of time taken for the event to bubble up to the element that will receive it, and it also means you can stop the propagation (not possible with .live since it's already reached the document).

The .on method also allows you to use a single method for all event handlers - .live will always delegate the event handler, whereas .on will only delegate if you pass a selector as the 2nd argument. Without one, it will bind to the matched set of elements.

More drawbacks are listed in the jQuery docs:

• jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.

• Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.

• Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

• On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live()...

• 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.

• 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()!

For all of these reasons, you should always use .on() instead of .live(). If you're stuck on an old version of jQuery (below 1.7), you can use .delegate() instead.

---

Side note - all event binding methods call .on() under the hood, so it makes sense to use .on() for all your event handling needs. Don't bother with the shortcut methods like .click(); you can see from the 1.7.2 source that all they do is call .on:

return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);

Answer 2

First of all live() method is deprecated as of jQuery 1.7 and you should start phasing out its use in your code.Chaining is not properly supported using this method.

There is a very good article on comparison between jQuery .bind() , .live() , .delegate() , .on()

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Answer 3

Full answer: http://www.jquery4u.com/jquery-functions/on-vs-live-review/#.UEXy7NZSskU

Short read:

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():

• jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.
• Chaining methods is not supported. For example, $(“a”).find(“.offsite, .external”).live( … ); is not valid and does not work as expected.
• Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.
• 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.
• 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()!

Also, bear in mind that the .on() function was only included in jQuery 1.7 it won’t work with earlier versions.