JQuery:删除动态添加的元素

Question

我有一个弹出窗口，允许我选择图像并将图像名称作为列表中的行元素返回到父窗口。我想在该行末尾添加一个删除链接，以便单独删除该行。

主页:

    <script>
    $(document).ready(function(){
        $('.ImageManager').click(function (event) {
            event.preventDefault();
            var w = window.open("/image-manager", "popupWindow", "width=600, height=400, scrollbars=yes");
        });
    });
    $(document).ready(function(){
        $(".remove").on("click", function(){
            $(this).parent().remove();
        });
    });
    </script>

<ul id="imagelist">
</ul>
<a href="" class="ImageManager">Add Image</a>

图像管理器弹出窗口:

<script>
    $(document).ready(function(){
        $(".addimage").click(function() {
            var imgname = $('img', this).attr("alt");
            $("#imagelist", window.opener.document).append('<li>' + imgname + '<a class="remove">Remove</a></li>');
        });
    });
</script>

在弹出窗口中，图像名称存储在替代文本中。当我单击主页中的“删除”时，没有任何反应。浏览了其他具有相同标题的 SO 帖子，但找不到类似的解决方案。

Answer 1

这将是在 DOM 准备好后添加的元素，因此它是动态的，并且您需要一个委托(delegate)事件处理程序:

$(document).ready(function(){
    $('.ImageManager').click(function (event) {
        event.preventDefault();
        var w = window.open("/image-manager", "popupWindow", "width=600, height=400, scrollbars=yes");
    });

    $("#imagelist").on("click", ".remove", function(){
        $(this).parent().remove();
    });
});