最近项目需要,希望能用jQuery实现To Do List的效果。想着这功能应该很简单呀,不就是一个节点的动态增删嘛。刷刷刷的代码就写出来了,如下:

HTML代码:

<ul class="pageList" id="pageList">
</ul>
<span id="addPage" class="addPage">Add</span>
<script src="jquery.min.js"></script>

jQuery代码:

$("#addPage").click(function() {
    // 刷新当前页列表
    function getCurrentPageCount() {
        return $("#pageList li").length;
    }

    // 添加列表项
    var pageListItemDeleteBtn = $("<span>").addClass("page-delete");
    var pageListItem = $("<li>").addClass("active").html("Page" + (getCurrentPageCount() + 1)).append(pageListItemDeleteBtn);
    $("#pageList").append(pageListItem);
});

$(".page-delete").click(deletePageListItem);

// 删除上级节点
function deletePageListItem() {
    $(this).parent().remove();
}

加上修饰版的CSS,显示效果如下:

新增列表没问题。但是!新添加的列表都不能通过点击删除按钮删除当前列表项。

尝试将动态生成的DOM改成页面加载时静态载入,即直接在ul#pageList节点下直接添加“<li class="active">Page1<span class="page-delete"></span></li>”,发现删除按钮确实有删除功能的。

猜想动态创建的元素不能自动绑定事件,所以导致了新常见的PageListItem中动态创建的pageListItemDeleteBtn元素并没有绑定$(".page-delete")的click事件,因此功能失效。

于是尝试为动态创建的ageListItemDeleteBtn元素增添click事件绑定pageListItemDeleteBtn.click(deletePageListItem)后,动态创建的删除按钮也具有了删除列表项功能。

所以,jQuery动态创建的元素不能自动绑定事件。

最好的方法是,在动态创建元素的时候,就给每一个元素重复绑定事件。

如下:

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/jquery/632