jQuery Not Recognizing Classes Added to Page Dynamically

Question

I am working on a project, where I'd like to add many elements of the same class to a page, and make all of these classes accessible to a $('selector').click(); event handler. What is happening though, is none of the dynamically added elements of the same class are responding to clicks.

To give you a better picture of what I mean, I made up a sample jsFiddle, which is very similar to the actual problem in my project:

Link to jsFiddle: http://jsfiddle.net/8LATf/3/

• One element of the class "added_element" is on the page already when it loads. This element is clickable.

• A button is clicked, and it adds other elements of class "added_element" to the page dynamically using append. None of these elements are clickable.

How can I make all of the elements of class "added_element" clickable? I'm guessing it has to do with the selector I use in the event handler, but I haven't been able to figure it out.

Any help is much appreciated!!!

Shoemaker

Answer 1

You need to delegate your handler. The easiest way is to delegate everything to the document using .on('click', ...) (this is how .live() is converted internally, as of jQuery 1.7):

$(document).on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

​http://jsfiddle.net/mblase75/8LATf/4/

However, in your case, you can delegate to the #container, since all the added elements appear within that. Delegating to the closest possible DOM element is preferable for efficiency reasons, when it's possible.

$('#container').on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

​ ​http://jsfiddle.net/mblase75/8LATf/5/

Winther

Outstanding. Thanks for the help. I will remember that live() is deprecated. – Shoemaker

I have the same problem, only the div I am trying to reach is not the immediate child of the #container. jQuery still doesn't seem to reach it because of this. Any ideas? – Penrose

Answer 2

You need to use events delegation here, the correct way to bind event will be:

$('#container').on('click', '.added_element', function() {
    var id = $(this).attr('id');
    alert(id);
});

Here is a corrected fiddle.

Demetra

Thanks for the help, your answer was identical to the accepted answer, but the other guy posted first. – Shoemaker

Answer 3

When you attach the event handler to "added_element" the ones created dynamically via script isn't in the DOM. So there isn't a event handler tied to the newly created element.

To get around this, attach the event handler to the containing div instead, and make it look for "added_element".

jfiddle: http://jsfiddle.net/yKJny/

Bibi

Please make your answer more "self-contained". Without clicking on your demo, I don't know if you're using .live or .on. And whenever your link goes dead your answer is useless. – Atmosphere

Since the OP used a jfiddle, it seems simpler just to link him back a working one. I'm not here to fish score, I just want to help the OP out. But, just for you, I will type my solution in the comment aswell!:) – Bibi

It's not "just for" me... it's for the benefit of anyone reading your answer when your link goes dead. The purpose of this place goes beyond the needs of the OP. Thank-you. – Atmosphere