1

我正在使用 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”时，它不会被删除，或者调用了删除项目。请建议我需要做什么才能使其正常工作。

4

2 回答 2

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'));
});
于 2012-04-23T15:45:06.950 回答
4

强烈建议使用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"));
});
于 2012-04-23T15:29:35.153 回答