Question

有一个父div [{1}}
dvParent

dvjQuery

我假设当我清空dvParent时，任何通过子div dvParent开启/委派的事件都将被删除，但这种情况不会发生。因此，当我点击删除按钮以清空父div dvjQuery并重新创建子div dvParent时，我仍然可以看到on.mouseenter正在工作。为什么？

JSFIDDLE

JS：

dvjQuery

HTML：

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

更新奇怪的是，这是有效的。为什么？：JSFIDDLE 我没有在这个上使用<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>。

off

Answer 1

因为.on的工作原理。

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

在您的情况下，dvQuery 动态已创建，因此它可以正常工作。

如果您不希望发生这种情况，请在删除元素之前致电.off()。

Answer 2

在清空dvParent之前，请删除处理程序，例如：

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

有关如何删除特定处理程序而非全部删除的更多详细信息：

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

Answer 3

因为（'form'）。on（）附加处理程序以形成元素而不是div。因此，当mouseOn从您的子div中冒出时，无论之前是否添加/删除div，都会触发它。

在删除元素或将事件附加到div本身时，请考虑在表单上使用.off（）

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

3 个答案: