附加的元素不触发事件

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

你应该使用

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

不是

.click()

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

因为 click 将与文档中的当前项目相关，而 on 与将添加到文档中的未来项目相关，但是您应该始终使用 on 与文档中已经存在的内容，例如添加的未来的父项元素所以使用类似的东西

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

Answer 2

我建议：

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

JS Fiddle demo.

参考资料：

• on()。
• parent()。
• remove()。

Answer 3

在列表中调用 click 函数并将 remover 设置为目标，如下所示：

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

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