Javascript jquery清空父div不会删除事件为什么 有一个父divdvParent 在dvParent

我假设当我清空

dvParent

时，子div

dvjQuery

上/委托的任何事件都将被删除，但这不会发生。 因此，当我单击“删除”按钮清空父div

dvParent

并重新创建子div

dvjQuery

时，我仍然可以看到on.mouseenter正在工作。为什么？

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

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

---

清空

dvParent

之前，请删除处理程序，例如：

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

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

---

因为这就是

.on

的工作原理

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

在您的例子中，

dvQuery

是动态创建的，因此它可以工作，也应该工作

如果不希望发生这种情况，请在删除元素之前调用

.off（）

。

因为（'form'）.on（）将处理程序附加到表单元素not div。因此，当鼠标从子div冒泡时，无论先前是否添加/删除div，它都会被触发

---

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

如果绑定事件，是否可能重复？我也要解开它吗？或者它的行为也像on？不，

bind

的行为不会像

on

那么当我清空父div时，绑定的事件将被删除？是的。我只需要手动处理开事件和关事件？好的。检查我的更新答案。我已经简化了这个例子，奇怪的是，即使我没有使用off，它仍在工作，这意味着，一旦删除，它不会向动态元素添加事件。为什么？似乎如果我们在上删除

的主元素，那么即使元素是动态生成的，事件也会被删除。
$("form").off();
$("#dvParent").empty();