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() function。将删除代码更改为：

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

<强> jsFiddle example

jquery .click没有看到.append（）代码

3 个答案: