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

Question

给定特定父节点,例如动态创建的模态div.在向它添加一堆动态html然后将这些元素绑定到click,mouseover等事件后,有没有办法解除与模态div的子元素相关联的所有事件.在我的具体示例中,一旦隐藏了模态div,它就会从dom中完全删除,然后在每次需要时从头开始重新创建.

我正在寻找一种不必跟踪所有特定绑定的方法,而只是使用一个调用来说:获取任何具有绑定和"关闭"它们的子元素.

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

Answer 1

如果用于附加事件,则可以使用unbind()bind().

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

要么

如果您曾经绑定事件,请使用off()on().

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

Answer 2

Yeap - 使用off()没有params - 将解除绑定的所有事件.

$('#parent *').off();

如果您的字面意思是儿童,即不是儿童或后代,请#parent > *改用.

Answer 3

我还想知道是否需要手动取消绑定已删除元素的每个子元素。

从 jquery 文档中你不应该：

用于删除的 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()or .empty()，你已经是内存泄漏安全的了！