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

Remove a Programmatically added LI from UL

本文关键字：方式 添加 LI 编程 UL 删除      更新时间：2023-09-26

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

我能够删除 UI 中已有的项目，但没有添加新项目。

下面是 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"时，它不会被删除，或者调用删除项目。请告知我需要做什么才能使其正常工作。

$('.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'));
});

强烈建议使用 jQuery 1.7+ 和 on（）：

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

或者，如果您使用的版本低于 jQuery 1.7，请使用 delegate（）：

$("#ulList").delegate(".aLink", "click", function() {
    RemoveItem($(this).attr("id"));
});
相关文章：