jquery清空父div不会删除事件为什么答案

【问题标题】：jquery emptying parent div does not delete events whyjquery清空父div不会删除事件为什么
【发布时间】：2014-05-26 15:10:10
【问题描述】：

有一个父 div dvParent
dvParent 里面有一个子 div dvjQuery

我假设当我清空 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');
    });
});

【问题讨论】：

Should I remove event handlers from element before removeChild?的可能重复

标签： javascript jquery

【解决方案1】：

因为这就是.on 的工作原理。

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

在您的情况下，dvQuery 是动态创建的，因此它可以工作并且应该可以工作。

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

【讨论】：

如果我绑定一个事件？我也要解绑吗？还是它的行为也一样？
不，bind 的行为不会像 on
所以当我清空父 div 时绑定的事件会被删除？对。我只需要处理事件并手动关闭它们吗？
好的。检查我更新的答案。我已经简化了示例，奇怪的是，即使我没有使用它，它仍在工作，这意味着一旦删除它就不会向动态元素添加事件。为什么？jsfiddle.net/bababalcksheep/Sfu6m/3
如果我们删除on的主元素，那么即使元素是动态生成的，事件也会被删除。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

因为 ('form').on() 将处理程序附加到表单元素而不是 div。因此，当 mouseOn 从您的子 div 冒泡时，无论之前是否添加/删除 div，都会触发它。

在移除元素或将事件附加到 div 本身时考虑在表单上使用 .off()

【讨论】：