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 a project that makes heavy use of contentEditable, so the DOM is changing, and elements can have classes added and removed as a result of user input.

I would like to be able to say "elements of class X should do Y when clicked", but if I understand correctly, $(".X").click(Y) will only add the event listener to elements that currently have class X.

Furthermore, if an element is no-longer part of class X, then it will still have the click event listener.

How can I do this?

Answer 1

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).

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.