javascript - jquery清空父div不删除事件为什么

Question

1. 有一个父div dvParent
2. dvParent里面有一个子div dvjQuery

我假设当我清空 dvParent 时，任何在子 div dvjQuery 上/委托(delegate)的事件都将被删除，但这并没有发生。因此，当我单击删除按钮以清空父 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()。