Question

我正在通过Ajax加载一些div元素并添加一些这样的事件：

$('.zoom-container').on('touchmove click scroll mousedown mousewheel', zoom.userEvent)

我的HTML：

<div id="Overlay"></div>

我的代码来创建一些内容：

$(".full_screen_icon").on({        //delegation
   click: function(evt) {
        var my_html ="zoom  prtty▲thngs";
        var colWidth= $(".block-wrap[data-colspan='2']").eq(0).outerWidth() || "300px";
            //content div erstellen
            $("<div>", {
            id: "detail_content",
                css: {
                    height:colWidth,
                    width:colWidth,
                    "margin-top":-colWidth/2,
                    "margin-left":-colWidth/2
                },
                html: my_html
            })
            .appendTo("#Overlay");

        //content holen via ajax
        $.get("http://www.yxz.de/products/"+ t +".php", function( html ) {
            $("#detail_content").html(html);
        }, 'html');
    }
       .. add zoom-container with some events like above

});

关闭叠加层我这样做：

$("#Overlay").click(function (e) {
    $(this).find('#detail_content').empty().remove();       
});

我总是认为，如果我删除带有附加事件的元素，事件也就消失了。

但是这里我加载点击相同的命名元素并附加相同的命名事件。

我看到删除div.element后事件仍然存在。这是我的代码中的问题还是这是正常的行为？

我现在不安全了。是否使用元素删除了事件？

Answer 1

如果我理解正确，您需要做的就是创建一个委托监听器而不是常规监听器。

$("#Overlay").on('touchmove click scroll mousedown mousewheel', '.zoom-container', zoom.userEvent);

这样，每次出现新元素时，您都不会附加新的事件侦听器。

我是否必须从已删除的元素中分离事件？

1 个答案: