What’s the difference between `on` and `live` or `bind`?

by

on() is an attempt to merge most of jQuery’s event binding functions into one. This has the added bonus of tidying up the inefficiencies with live vs delegate. In future versions of jQuery, these methods will be removed and only on and one will be left.

Examples:

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);

// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

Internally, jQuery maps all these methods and shorthand event handler setters to the on() method, further indicating that you should ignore these methods from now on and just use on: 

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

See https://github.com/jquery/jquery/blob/1.7/src/event.js#L965.

More Related Contents:

  1. Hide/Show div on specific page with jquery
  2. Jquery mouseenter() vs mouseover()
  3. Dialog box runs for 1 sec and disappears?
  4. Full path from file input using jQuery
  5. jQuery: serialize() form and other parameters
  6. Which selector do I need to select an option by its text?
  7. Is there a native jQuery function to switch elements?
  8. Jquery Ajax Loading image
  9. jquery sort list based on data attribute value
  10. Load content of a div on another page
  11. jQuery .on does not work but .live does
  12. Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?
  13. jQuery, get html of a whole element [duplicate]
  14. jQuery Ajax Request inside Ajax Request
  15. How an I get all form elements (input, textarea & select) with jQuery?
  16. jqGrid does not populate with data
  17. Set Focus After Last Character in Text Box
  18. $(window).unload is not firing
  19. How to get the position of a draggable object
  20. How to create a direct link to any fancybox box
  21. Setting min date in jQuery datepicker
  22. Capture 404 status with jQuery AJAX
  23. jQuery Validation plugin: validate check box
  24. JQuery, Flot, valuelabels, center
  25. how to avoid cross domain policy in jquery ajax for consuming wcf service?
  26. Remove CSS “top” and “left” attributes with jQuery
  27. jQuery validator and datepicker click not validating
  28. Selecting a jQuery Tab using a parameter in the URL
  29. Using jQuery’s $.ajax within an angularJS controller
  30. In-cell data bars in jqGrid – possible or not?

Leave a Comment