javascript - 从 UL 中删除以编程方式添加的 LI

Question

我使用的是 asp.net MVC 3，我正在尝试删除通过 HTTP Post 添加的 LI。

我可以删除 UI 中已有的项目，但不能删除添加的新项目。

这是用户界面代码:

<a href="#" id="addNew">Add New</a>
<div id="ulList">
    <ul>
        <li id="li_1"><a href="#" id="a_1" class="aLink">1</a></li>
        <li id="li_2"><a href="#" id="a_2" class="aLink">2</a></li>
        <li id="li_3"><a href="#" id="a_3" class="aLink">3</a></li>
    </ul>
</div>
<script type="text/javascript">

    $('#addNew').on("click", function () {
        $.ajax({
            url: '@Url.Action("AddItem")',
            type: "POST",
            data: { id: 4 },
            success: function (data) {
                $('#ulList ul').append(data);
            }
        });
    });

    $('.aLink').on("click", function () {
        RemoveItem($(this).attr('id'));
    });

    function RemoveItem(id) {
        id = id.substring(id.indexOf("_") + 1);
        $.ajax({
            url: '@Url.Action("RemoveItem")',
            type: "POST",
            data: { id: id },
            success: function (event, ui) {
                $('#li_' + id).remove();
            }
        });

    }
</script>

AddItem 在代码后面调用 AddItem 并返回简单的字符串。

[HttpPost]
        public ActionResult AddItem(int id)
        {
            return Content(@"<li id=""li_4""><a href=""#"" id=""a_4"" class=""aLink"">4</a></li>");
        }

项目确实已添加，但请注意，当您单击新添加的项目“4”时，它不会被删除或调用删除项目。请建议我需要做什么才能使其正常工作。

Answer 1

$('.aLink').on("click", function () { 
    RemoveItem($(this).attr('id')); 
}); 

您的 jQuery 事件处理程序只会将事件附加到页面上最初带有 .on 的元素。为了使您的事件在动态添加的元素上起作用，您有 2 个选项，具体取决于您运行的 jQuery 版本。

V1.4 -> 1.7 .delegate()

$('#ulList').delegate("click","a" function () { 
    RemoveItem($(this).attr('id')); 
});

v1.7+ 修改了 .on() -> 重定向指向父容器

$('#ulList').on("click","a", function () { 
    RemoveItem($(this).attr('id'));
});