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 Fiddle demo

参考文献：

Answer 2

你应该使用

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

不

.click()

请参阅：http://api.jquery.com/on/

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

这样的东西

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

Answer 3

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

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

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

元素不会触发事件

3 个答案: