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

Question

这个问题已经有答案了:

Events triggered by dynamically generated element are not captured by event handler (5 个回答)

已关闭 10 年前。

我的问题很难用言语表达。所以我创建了一个 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

您需要将事件委托(delegate)给 dom 中最接近的现有父级:

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

这是因为 jQuery 无法将 click 事件放在元素上，因为页面加载时不存在该事件，因此这会将事件放在父元素上，但会影响子元素