如何使用JQuery删除父元素的子元素的所有事件处理程序

如何使用JQuery删除父元素的子元素的所有事件处理程序,jquery,Jquery,给定一个特定的父节点,例如一个动态创建的模态div。在向其添加一组动态html并将这些元素绑定到click、mouseover等事件后,是否有方法取消绑定与模态div子元素关联的所有事件。在我的特定示例中,一旦模态div被隐藏,它就会从dom中完全移除,然后在每次需要时从头开始重新创建 我正在寻找一种不必跟踪所有特定绑定的方法,而只是使用一个调用来表示:获取所有具有绑定的子元素并“关闭”它们 注意:我可以验证从dom中删除元素然后重新创建它不会终止绑定,因为打开和关闭模式div会导致绑定事件的触

给定一个特定的父节点,例如一个动态创建的模态div。在向其添加一组动态html并将这些元素绑定到click、mouseover等事件后,是否有方法取消绑定与模态div子元素关联的所有事件。在我的特定示例中,一旦模态div被隐藏,它就会从dom中完全移除,然后在每次需要时从头开始重新创建

我正在寻找一种不必跟踪所有特定绑定的方法,而只是使用一个调用来表示:获取所有具有绑定的子元素并“关闭”它们

注意:我可以验证从dom中删除元素然后重新创建它不会终止绑定,因为打开和关闭模式div会导致绑定事件的触发次数与创建div的次数相同。我使用的是
$(document).on('click','abc',函数(e){})以绑定元素

Yeap-使用不带参数的
off()
将解除绑定所有事件

$('#parent *').off();
如果您的字面意思是子对象,即不是子对象或子对象,请改用
#parent>*

如果您使用
bind()
附加事件,则可以使用

  $('#foo').children().unbind();
  $('#foo').children('.class').unbind(); //You can give selector for limiting clildren

如果使用
on()
绑定事件,则使用

 $('#foo').children().off();
 $('#foo').children('class').off();   //You can give selector for limiting clildren
用于从所有子体(而不是直接子体)中删除事件,您可以使用


我还想知道是否需要手动解除已移除元素的每个子元素的绑定

从jquery文档中,您不应该:

如果我们在里面有任意数量的嵌套元素,它们也会被删除。其他jQuery构造(如数据或事件处理程序)也会被删除

因为我很好奇这是不是真的,所以我检查了源代码:

function remove( elem, selector, keepData ) {
    var node,
        nodes = selector ? jQuery.filter( selector, elem ) : elem,
        i = 0;

    for ( ; ( node = nodes[ i ] ) != null; i++ ) {
        if ( !keepData && node.nodeType === 1 ) {
            jQuery.cleanData( getAll( node ) );
        }

        if ( node.parentNode ) {
            if ( keepData && jQuery.contains( node.ownerDocument, node ) ) {
                setGlobalEval( getAll( node, "script" ) );
            }
            node.parentNode.removeChild( node );
        }
    }

    return elem;
}
如你所见:

jQuery.cleanData( getAll( node ) );
正在清理已删除元素的所有子元素的所有事件


因此,最后:如果您使用
$(element).remove()
.empty()
,您已经是内存泄漏安全的了

在某些情况下,您不希望将事件直接绑定到元素。相反,您希望将其绑定到父元素,例如“body”。当您希望全局定义事件侦听器,但元素可能还不存在时,这一点非常重要:

$("body").on("mouseenter", ".hover-item", function() {
    // do the thing
}
这里的问题是,如果您尝试在“.hover item”上运行.off(),它将不起作用。或者,如果您尝试在“body”上使用.off(),并按照公认答案中的建议使用.children(),那么它也不会起任何作用

我认为最好的做法是将事件绑定到特定的类名,而不是使用.off(),如果要禁用这些事件,请删除类名:

$(".the-element").removeClass(".hover-item");
现在,该特定元素将不再启用事件侦听器。但是,由于您在技术上在“body”上定义了事件侦听器,因此如果以后需要再次启用悬停效果,只需使用addClass(“.hover item”),一切都会正常工作


现在,这实际上只适用于多个项目有一个动画的情况。悬停事件就是一个很好的例子。例如,您可以将同一事件应用于所有按钮,而不是将不同的悬停事件应用于不同的按钮。但是,如果您只想禁用某个特定按钮的悬停事件,则可以这样做。

显示如何绑定(或如何绑定的示例)。但我建议,如果你用的是,有趣的。阅读我注意到的文档,要从元素中删除所有委派事件而不删除非委派事件,请使用特殊值“**”。我不知道。如何在普通javascript中执行此操作?
children()
只获取直接子代,而不是所有子代。
$(".the-element").removeClass(".hover-item");