jquery emptying parent div does not delete events why

Question

There is a parent div dvParent
There is a child div dvjQuery inside dvParent

I am assuming when i empty dvParent , any events that are on/delegated over child div dvjQuery will be deleted but this is not happening. So when I click remove button to empty parent div dvParent and recreate child div dvjQuery , i can still see on.mouseenter working.Why ?

JSFIDDLE

JS:

$(document).ready(function () {
    var dvjQuery = $("<div/>").attr("id", "dvjQuery").text("some text");
    $('#btnAdd').attr('disabled', 'disabled');
    $("form").on({
        mouseenter: function () {
            $(this).addClass('highlight');
        },
        mouseleave: function () {
            $(this).removeClass('highlight');
        }
    }, '#dvjQuery');
    $('#btnRemove').click(function () { 
        $("#dvParent").empty();        
        $(this).attr('disabled', 'disabled');
        $('#btnAdd').removeAttr('disabled');
    });
    $('#btnAdd').click(function () {
        $("#dvParent").html(dvjQuery);
        $(this).attr('disabled', 'disabled');
        $('#btnRemove').removeAttr('disabled');
    });
});

HTML:

<form>
    <div id="dvParent">
        <div id="dvjQuery">some text</div>
    </div>
    <br/><br/>
    <input type='button' id='btnRemove' Value=' Remove Div ' />
    <input type='button' id='btnAdd' Value='  Add Div  ' />
    <br/><br/>
</form>

UPDATE: Strangely this is working. Why ? : JSFIDDLE I am not using off on this one.

//
//HTML
//
<input type='button' id='btnRemove' Value=' Remove Div ' />
<input type='button' id='btnAdd' Value='  Add Div  ' />
<div id="raw">
    <ul id="temp">
        <li>One</li>
    </ul>
</div>
//
//JS
//
$(document).ready(function () {
    var list = $('<ul id="temp"><li>One</li></ul>');
    $('#btnAdd').attr('disabled', 'disabled');

    $("#temp").on({
        mouseenter: function () {
            $(this).addClass('highlight');
        },
        mouseleave: function () {
            $(this).removeClass('highlight');
        }
    }, 'li');

    $('#btnRemove').click(function () {
        $("#raw").empty();
        $(this).attr('disabled', 'disabled');
        $('#btnAdd').removeAttr('disabled');
    });

    $('#btnAdd').click(function () {
        $("#raw").append(list);
        $(this).attr('disabled', 'disabled');
        $('#btnRemove').removeAttr('disabled');
    });
});

possible duplicate of [Should I remove event handlers from element before removeChild?](http://stackoverflow.com/questions/14040386/should-i-remove-event-handlers-from-element-before-removechild) — Pengtuzi, Apr 12 '14 at 11:45

score 6 · Accepted Answer · answered Apr 12 '14 at 11:49

6

Because that's how .on works.

It is used to attach a event on dynamically added elements.

And in your case, the dvQuery is dynamically created and so it works and should work.

If you don't want this to happen, then call .off() before removing the element.

answered Apr 12 '14 at 11:49

Amit Joki

58,320
7
77
95

So If i bind an event ? will i have to unbind it too ? or does it behave like on too ? – django Apr 12 '14 at 12:16
No, `bind`won't behave like `on` – Amit Joki Apr 12 '14 at 12:20
So binded events will get deleted when i will empty parent div ? right.I only have to take care of on events and off them manually ? – django Apr 12 '14 at 12:22
Ok. Check my updated answer.I have simplified example and strangely even though i am not using off it is working , means , it doesnot add event to dynamic elements once removed. why ?http://jsfiddle.net/bababalcksheep/Sfu6m/3/ – django Apr 12 '14 at 13:57
It seems if we delete the master element of ```on``` then events are deleted even if elements are generated dynamically. – django Apr 12 '14 at 14:19

score 1 · Answer 2 · answered Apr 12 '14 at 11:47

1

Before you empty dvParent, remove the handlers e.g:

$("form").off();
$("#dvParent").empty();

More details on how to remove specific handlers instead of all:

http://api.jquery.com/off/

answered Apr 12 '14 at 11:47

Starscream1984

3,072
1
19
27

score 0 · Answer 3 · answered Apr 12 '14 at 11:54

Because ('form').on() attached handler to form element not div. So when mouseOn bubbles up from your child div, it is triggered regardless of adding/removing the div earlier.

Consider using .off() on form when removing the element or attach an event to the div itself

jquery emptying parent div does not delete events why

3 Answers3