on() method: This method attaches events not only to existing elements but also for the ones appended in the future as well. The difference here between on() and live() function is that on() method is still supported and uses a different syntax pattern, unlike the above two methods.
Definition and Usage The live() method attaches one or more event handlers for selected elements, and specifies a function to run when the events occur. Event handlers attached using the live() method will work for both current and FUTURE elements matching the selector (like a new element created by a script).
In short: . bind() will only apply to the items you currently have selected in your jQuery object. . live() will apply to all current matching elements, as well as any you might add in the future. The underlying difference between them is that live() makes use of event bubbling.
The on
documentation states (in bold ;)):
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to
.on()
.
Equivalent to .live()
would be something like
$(document.body).on('change', 'select[name^="income_type_"]', function() {
alert($(this).val());
});
Although it is better if you bind the event handler as close as possible to the elements, that is, to an element being closer in the hierarchy.
Update: While answering another question, I found out that this is also mentioned in the .live
documentation:
Rewriting the
.live()
method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:$(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+
In addition to the selected answer,
Port jQuery.live
to jQuery 1.9+ while you wait for your application to migrate. Add this to your JavaScript file.
// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
live: function( types, data, fn ) {
if( window.console && console.warn ) {
console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
}
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
});
Note: Above function will not work from jQuery v3 as this.selector
is removed.
Or, you can use https://github.com/jquery/jquery-migrate
Just found a better solution which doesn't involve editing third party code:
https://github.com/jquery/jquery-migrate/#readme
Install the jQuery Migrate NuGet package in Visual Studio to make all the versioning issues go away. Next time Microsoft update their unobtrusive AJAX and validation modules perhaps try it without the migrate script again to see if they resolved the issue.
As jQuery Migrate is maintained by the jQuery Foundation I think this is not only the best approach for third party libraries and also to get warning messages for your own libraries detailing how to update them.
In addition to the selected answers,
If you use Visual Studio, you can use the Regex Replace.
In Edit > Find and Replace > Replace in Files
Or Ctrl + Shift + H
In Find and Replace pop-up, set these fields
Find what: \$\((.*)\)\.live\((.*),
Replace with: $(document.body).on($2,$1,
In find options check "Use Regular Expressions"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With