do I have to detach events from deleted Elements?

Question

I'am loading via Ajax some elements to div and add some events like this:

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

my html:

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

my code to create some content:

$(".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

});

to close the overlay i do this:

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

I allways thought that, if I remove the element with the attached events that the events are gone too.

But here I'am loading on click the same named elements and attach the same named events.

I see that the events are still there after removing the div.element. Is this an issue in my code or is this the normal behaviour?

I'am insecure now. Are the events deleted with the element or not?

How are you seeing that the events are still there? What does that even mean? You're probably confusing events with event handlers. — mihai, Jun 06 '13 at 10:11
zoom.userEvent adds a click event to an element. If I delete the element and add in again the click event is double. — hamburger, Jun 06 '13 at 10:16

score 0 · Answer 1 · answered Jun 06 '13 at 10:27

If I understand correctly all you need to do is to create a delegate listener instead of a regular one.

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

This way you won't be attaching a new event listener every time a new element appears.

do I have to detach events from deleted Elements?

1 Answers1