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

Use the jQuery functions .live() and .die(). Available in jQuery 1.3.x

From the docs:

To display each paragraph's text in an alert box whenever it is clicked:

$("p").live("click", function(){

  alert( $(this).text() );

});

3 years ago

You can bind a single click event to a page for all elements, no matter if they are already on that page or if they will arrive at some future time, like that:

$(document).bind('click', function (e) {

   var target = $(e.target);

   if (target.is('.myclass')) {

      e.preventDefault(); // if you want to cancel the event flow

      // do something

   } else if (target.is('.myotherclass')) {

      e.preventDefault();

      // do something else

   }

});

Been using it for a while. Works like a charm.

In jQuery 1.7 and later, it is recommended to use .on() in place of bind or any other event delegation method, but .bind() still works.

3 years ago

The .live() method is deprecated as of jQuery 1.7.



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.



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 to exist yet).

3 years ago