1

asp.net MVC 3を使用していますが、HTTPPostを介して追加された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>

PASSWORDは、コードビハインドでPASSWORDを呼び出し、単純な文字列を返します。

[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。イベントが動的に追加された要素で機能するためには、実行しているjQueryのバージョンに応じて2つのオプションがあります。

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 に答える