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准备好之后添加的元素,因此它是动态的,并且您将需要一个委托的事件处理程序:

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