Adding event listeners to current and future elements with a particular class

Question

With JQuery, is it possible to add an event listener to any element that currently, or will in the future, have a particular class?

I\'m working on

Answer 1

the jQuery live() method swill allow to have a "live" action listener - so if new DOM elements match the selector, they will be attached to the action listener. For example:

$(".X").live("click", function(){
    alert('some action');
});

See the documentation here for more info: http://api.jquery.com/live/

I'm not sure that the second part of your question about keeping the action listener attached after removing the class os possible - someone else might have a solution though.

Answer 2

you'll want to use event delegation. jquery 1.7 has made this more abstract than previous versions, but it looks something like this:

$("#myWrappingElement").on("click", ".myclass", function(event){
    alert($(this).text());
});

this basically adds a click event listener to the #myWrappingElement element, and jquery will automagically look to see what the original event target was and fire the proper function. this means you can add or remove .myclass elements and still have events fire on them.

Answer 3

Yep. What you're talking about is called event delegation. Here's an example:

$('#container').on('click', '.innerElement', function(){
   /// Do stuff
});

In your case, #container would be an element that is known to exist on page load which will contain the child elements you care about (either now or in the future). This approach takes advantage of event bubbling in the DOM.

As another poster mentioned, the live method will also work -- but it has been deprecated in jQuery 1.7, and is generally not as performant as using more selective delegation (such as the example above).