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);