Turning live() into on() in jQuery

by

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+

More Related Contents:

  1. Getting Error “Form submission canceled because the form is not connected”
  2. JQuery .on() method with multiple event handlers to one selector
  3. Substraction two textbox values with jquery [duplicate]
  4. How to get the children of the $(this) selector?
  5. Getting the ID of the element that fired an event
  6. Remove duplicate values from JS array [duplicate]
  7. How to dynamically insert a tag via jQuery after page load?
  8. jQuery document.ready vs self calling anonymous function
  9. Trigger Change event when the Input value changed programmatically?
  10. Accessing a CSS custom property (aka CSS variable) through JavaScript
  11. ReferenceError: $ is not defined
  12. jquery – get text for element without children text
  13. Pass Javascript variable to PHP via ajax
  14. Detect whether scroll event was created by user
  15. Intercept all ajax calls?
  16. How to detect when an iframe has already been loaded
  17. How can I return a variable from a $.getJSON function
  18. break array of objects into separate arrays based on a property
  19. Ajax HEAD request via Javascript/jQuery
  20. Fullpage.js. Adding a scroll delay
  21. Validate html text input as it’s typed
  22. How to show live preview in a small popup of linked page on mouse over on link?
  23. Change Height based on Browser Size/Resize
  24. Refresh a section after adding HTML dynamically to jquery mobile [duplicate]
  25. JavaScript/jQuery event listener on image load IE issues
  26. Allow text box only for letters using jQuery?
  27. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  28. Jquery change text between two elements
  29. What does this JavaScript/jQuery syntax mean?
  30. Google maps responsive resize

Leave a Comment