jquery .click doesn't see .append() code

Question

My problem is rather hard to word. So I have created a jsfiddle.net of my issue.

I have a list of divs. Inside each div there is some text and an "X". The "X" is to delete the parent div. The three divs and "X" works fine. But if I were to add a button that appends a new div to the list, then those "X"'s don't work. Any idea what this problem is? I know this is probably some basic JS DOM thing. But I'm self thought and just don't understand JS very well to resolve this issue.

Please and thank you for your time.

http://jsfiddle.net/JLxKJ/

$("#trigger").click(function() {
    $("#participants_wrapper").append("<div class='participant'><a href='javascript:void(0)' class='delete_participant'>X</a>Appended</div>");
    return false;
});
$(".delete_participant").click(function(){
    $(this).closest('div').remove();
});
<div id="participants_wrapper">
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
  <div class="participant"><a href="javascript:void(0)" class="delete_participant">X</a>already here</div>
</div>
<a href="javascript:void(0)" id="trigger">add this participant</a>

This question, again. you need to use `on` with it's delegate event overload. Done. — gdoron is supporting Monica, Feb 07 '13 at 17:59

score 2 · Accepted Answer · edited Feb 07 '13 at 18:02

2

You need to delegate the event to closest existing parent in the dom:

$("#participants_wrapper").on("click", ".delete_participant", function(){
    $(this).closest('div').remove();
});

This is because jQuery can't put the click event on the element, as it doesn't exist on page load, so this puts the event on the parent, but affects the children

edited Feb 07 '13 at 18:02

Andy

13,875
3
46
76

answered Feb 07 '13 at 18:00

Jai

71,335
12
70
93

Thank you so much @jai. Quick, clear and straight to the point. – CS Studios Feb 07 '13 at 18:09
@CSStudios If you liked the answer, click the green tick next to it. Your question will then be marked as answered. – SeinopSys Feb 07 '13 at 18:17
yea, i had to wait. its there now. – CS Studios Feb 07 '13 at 18:32
@csStudios Thanks man. – Jai Feb 07 '13 at 18:33
And thanks To Andy too. – Jai Feb 07 '13 at 18:33

score 0 · Answer 2 · answered Feb 07 '13 at 18:01

0

because you are not binding the events again to the new element.

You can use on() to get around that.

$("#participants_wrapper").on("click", ".delete_participant", 
    function(){
        $(this).closest('div').remove();
    }
);

answered Feb 07 '13 at 18:01

epascarello

185,306
18
175
214

score 0 · Answer 3 · answered Feb 07 '13 at 18:02

0

For dynamically added elements, use jQuery's .on() function. Change your delete code to:

$("#participants_wrapper").on('click', '.delete_participant', function () {
    $(this).closest('div').remove();
});

jsFiddle example

answered Feb 07 '13 at 18:02

j08691

190,436
28
232
252

Thanks @j08691, but Jai beat you to it. Thanks though. – CS Studios Feb 07 '13 at 18:10

jquery .click doesn't see .append() code

3 Answers3