javascript - 附加的元素不触发事件

Question

我有一个清单

<ul id="list">
    <li> element one <span class="remover">X</span></li>
    <li> element two <span class="remover">X</span></li>
</ul>

这个列表是动态附加的

<input type="text" id="adder">
<button id="add">Add</button>

<script>
    $("#add").click(function(){
        $("#list").append('<li>'+$("#adder").val()+' <span class="remover">X</span></li>');
    });
</script>

但问题是这部分

<script> 
    $(".remover").click(function(){
        $(this).parent().remove();
    });
</script>

删除与静态添加的项目完美配合，但是当涉及到新的附加项目时，点击没有任何反应，甚至不会触发该功能

Answer 1

我建议：

$('#list').on('click', '.remover', function(e){
    $(this).parent().remove();
});

JS 小提琴演示。

参考：

• on().
• parent().
• remove().

Answer 2

你应该使用

on('click',function(){})

不是

.click()

参考：http ://api.jquery.com/on/

因为 click 将与文档中的当前项目相关，而 on 与将添加到文档中的未来项目相关，但是您应该始终使用 on 与文档中已经存在的内容，例如将来添加元素的父级，因此请使用就像是

$("#parent").children("li").children('.remover').on("click",function(){bla bla bla;});

Answer 3

调用 list 上的 click 函数并将 remover 设置为目标，如下所示：

$( '#list' ).on( 'click', '.remover', function (e) {
    $(e.target).parent().remove();
});

您不能直接在其上设置点击事件，它必须设置在从未添加到页面的元素上。