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>

Image Manger Popup：

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

JQuery：删除动态添加的元素

1 个答案: