jquery清空父div不删除事件的原因

Question

1. 有一个父div dvParent
2. dvjQuery里面有一个儿童divdvParent

我假设当我清空时dvParent,任何通过子div上的/委托的事件都dvjQuery将被删除,但这不会发生.因此,当我单击删除按钮以清空父div dvParent并重新创建子div时dvjQuery,我仍然可以看到on.mouseenter工作.为什么？

的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>

更新: 奇怪的是这是有效的.为什么？:JSFIDDLE 我没有off在这个上使用.

//
//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');
    });
});

Answer 1

因为那是.on有效的.

它用于在动态添加的元素上附加事件.

在您的情况下,它dvQuery是动态创建的,因此它可以正常工作.

如果您不希望发生这种情况,请.off()在删除元素之前调用.