javascript - jquery .click 看不到 .append() 代码

Question

我的问题很难说。所以我为我的问题创建了一个 jsfiddle.net。

我有一个 div 列表。在每个 div 中都有一些文本和一个“X”。“X”是删除父div。三个 div 和“X”工作正常。但是，如果我要添加一个将新 div 附加到列表的按钮，那么那些“X”就不起作用了。知道这个问题是什么吗？我知道这可能是一些基本的 JS DOM 东西。但我自以为是，只是不太了解 JS 来解决这个问题。

请并感谢您的宝贵时间。

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>

Answer 1

您需要将事件委托给 dom 中最近的现有父级：

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

这是因为 jQuery 不能将 click 事件放在元素上，因为它在页面加载时不存在，所以这会将事件放在父级上，但会影响子级

Answer 2

因为您没有再次将事件绑定到新元素。

您可以使用on()来解决这个问题。

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

Answer 3

对于动态添加的元素，使用 jQuery 的.on() 函数。将您的删除代码更改为：

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

jsFiddle 示例