Question

我正在使用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”时，它不会被删除或调用删除项目。请告知我需要做什么才能使其发挥作用。

Answer 1

强烈建议您使用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"));
});

Answer 2

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

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

V1.4 - ＆gt; 1.7 .delegate（）

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

v1.7 +修正.on（） - ＆gt;重定向到指向父容器

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

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

2 个答案: