What's the difference between jQuery .live() and .on()

I see there's a new method .on() in jQuery 1.7 that replaces the .live() in earlier versions.

I'm interested to know the difference between them and what the benefits are of using this new method.

It's pretty clear in the docs why you wouldn't want to use live. Also as mentioned by Felix, .on is a more streamline way of attaching events.

> 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 http://api.jquery.com/event.stopPropagation"><code>event.stopPropagation()</code></a> > 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()!

One difference that people stumble on when moving from .live() to .on() is that the parameters for .on() are slightly different when binding events to elements added dynamically to the DOM.

Here's an example of the syntax we used to use with the .live() method:

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Now with .live() being deprecated in jQuery version 1.7 and removed in version 1.9, you should use the .on() method. Here's an equivalent example using the .on() method:

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Please note that we're calling .on() against the document rather than the button itself. We specify the selector for the element whose events we're listening to in the second parameter.

In the example above, I'm calling .on() on the document, however you'll get better performance if you use an element closer to your selector. Any ancestor element will work so long as it exists on the page before you call .on().

This is explained here in the documentation but it is quite easy to miss.

See the official Blog

> [..]The new .on() and .off() APIs unify all the ways of attaching > events to a document in jQuery — and they’re shorter to type![...]

.live()

This method is used to attach an event handler for all elements which match the current selector, now and in the future.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

and

.on()

This method is used to attach an event handler function for one or more events to the selected elements below is the example.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Good tutorial on difference between on vs live

Quote from the above link

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

I am the author of a Chrome extension "Comment Save" which uses jQuery, and one which used .live(). The way the extension works is by attaching a listener to all the textareas using .live() - this worked well since whenever the document changed it would still attach the listener to all the new textareas.

I moved to .on() but it doesn't work as well. It doesn't attach the listener whenever the document changes - so I have reverted back to using .live(). That is a bug I guess in .on(). Just be careful about it I guess.

for more info check it out.. .live() and .on()

.live() method is used when you deal with the dynamic generation of contents... like I have created on program that adds a tab when i change the value of a Jquery Slider and I want to attach the close button functionality to every tabs which will generated... the code i have tried is..

var tabs = $('#tabs').tabs();
										// live() methos attaches an event handler for all
										//elements which matches the curren selector
		$( "#tabs span.ui-icon-close" ).live( "click", function() {


			// fetches the panelId attribute aria-control which is like tab1 or vice versa
			var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
			$( "#" + panelId ).remove();
			tabs.tabs( "refresh" );
		});

and it works preety much cool...

I have a requirement to identify browser closed event. After Doing to of research I am doing following using jQuery 1.8.3

1. Turn ON a flag using following jQuery when hyperlink is clicked

   $('a').live('click', function() {cleanSession = false;});

2. Turn ON a flag using following jQuery when any time input button type of submit is clicked

$("input[type=submit]").live('click',function(){alert('input button clicked');cleanSession=false;});

3. Turn ON a flag using following jQuery when any time form submit happens

$('form').live('submit', function() {cleanSession = false;});

Now important thing...my solution only works if I use .live instead .on. If I use .on then the event gets fired after form gets submitted and which is too late. Many times my forms gets submitted using javascript call (document.form.submit)

So there is a key difference between .live and .on . If you use .live your events get fired immediately but if you switch to .on it doesn't get fired on time