How do I attach events to dynamic HTML elements with jQuery? [duplicate]

by

I am adding a new answer to reflect changes in later jQuery releases. The .live() method is deprecated as of jQuery 1.7.

From http://api.jquery.com/live/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a selector combined with ‘myclass’ as an argument.

See http://api.jquery.com/on/

So instead of…

$(".myclass").click( function() {
    // do something
});

You can write…

$('body').on('click', 'a.myclass', function() {
    // do something
});

This will work for all a tags with ‘myclass’ in the body, whether already present or dynamically added later.

The body tag is used here as the example had no closer static surrounding tag, but any parent tag that exists when the .on method call occurs will work. For instance a ul tag for a list which will have dynamic elements added would look like this:

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

As long as the ul tag exists this will work (no li elements need exist yet).

More Related Contents:

  1. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  2. How to set file input value when dropping file on page? [duplicate]
  3. jQuery document.createElement equivalent?
  4. Detecting Browser Autofill
  5. Firing event on DOM attribute change
  6. JavaScript / jQuery: Test if window has focus
  7. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  8. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  9. How can I listen for a click-and-hold in jQuery?
  10. prevent Scroll bubbling from element to window
  11. Get index of clicked element in collection with jQuery
  12. How to stop default link click behavior with jQuery
  13. Listening for Youtube Event in JavaScript or jQuery
  14. Throttle event calls in jQuery
  15. JavaScript: DOM load events, execution sequence, and $(document).ready()
  16. How do you detect the clearing of a “search” HTML5 input?
  17. JS Events: hooking on value change event on text inputs
  18. how to move a div with arrow keys
  19. How can I get jQuery .val() AFTER keypress event?
  20. Modifying a query string without reloading the page
  21. jQuery events .load(), .ready(), .unload()
  22. Get the clicked object that triggered jquery blur() event [duplicate]
  23. How to know if .keyup() is a character key (jQuery)
  24. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  25. Prevent onclick action with jQuery
  26. jQuery – How can I temporarily disable the onclick event listener after the event has been fired?
  27. jquery/javascript: function(e){…. what is e? why is it needed? what does it actually do/accomplish?
  28. Unloading/Removing content from an iFrame
  29. jquery keypress event object keyCode for firefox problem?
  30. How to capture browser close event?

Leave a Comment