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!!!

Blazemonger · Accepted Answer · 2012-06-25T14:17:28.600

12

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/

edited Jun 25 '12 at 14:17

answered Jun 25 '12 at 14:12

Blazemonger

90,923
26
142
180

Outstanding. Thanks for the help. I will remember that live() is deprecated. – Camden Reslink Jun 25 '12 at 14:21
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? – Cos Nov 10 '12 at 23:31

score 0 · Answer 2 · answered Jun 25 '12 at 14:14

0

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.

answered Jun 25 '12 at 14:14

bjornd

22,397
4
57
73

Thanks for the help, your answer was identical to the accepted answer, but the other guy posted first. – Camden Reslink Jun 25 '12 at 14:26

score -1 · Answer 3 · answered Jun 25 '12 at 14:13

-1

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/

answered Jun 25 '12 at 14:13

ninja

2,233
1
15
15

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. – Sparky Jun 25 '12 at 14:23
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!:) – ninja Jun 25 '12 at 14:25
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. – Sparky Jun 25 '12 at 14:31

jQuery Not Recognizing Classes Added to Page Dynamically

3 Answers3