jQuery - 从DOM中删除元素时的触发事件

Question

我试图弄清楚当从页面中删除元素时如何执行一些js代码:

jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */

是否有为此量身定制的活动,例如:

jQuery('#some-element').onremoval( function() {
    // do post-mortem stuff here
});

谢谢.

Answer 1

您可以使用jQuery特殊事件.

简单来说,

建立:

(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      if (o.handler) {
        o.handler()
      }
    }
  }
})(jQuery)

用法:

$('.thing').bind('destroyed', function() {
  // do stuff
})

回答Pierre和DesignerGuy评论的补遗:

要在调用时没有回调$('.thing').off('destroyed'),请将if条件更改为:if (o.handler && o.type !== 'destroyed') { ... }

Answer 2

刚刚检查过,它已经内置在当前版本的JQuery中:

jQuery - v1.9.1

jQuery UI - v1.10.2

$("#myDiv").on("remove", function () {
    alert("Element was removed");
})

重要说明:这是Jquery UI脚本(而不是JQuery)的功能,因此您必须加载两个脚本(jquery和jquery-ui)才能使其正常工作.这是一个例子:http://jsfiddle.net/72RTz/

Answer 3

您可以绑定到DOMNodeRemoved事件(DOM Level 3 WC3规范的一部分).

适用于IE9,最新版本的Firefox和Chrome.

例:

$(document).bind("DOMNodeRemoved", function(e)
{
    alert("Removed: " + e.target.nodeName);
});

您还可以在通过绑定插入元素时获得通知 DOMNodeInserted

Answer 4

没有用于删除元素的内置事件,但您可以通过伪扩展jQuery的默认remove方法创建一个.请注意,必须在实际删除回调之前调用回调以保持引用.

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

$('#some-element').bind('remove', function() {
    console.log('removed!');
    // do pre-mortem stuff here
    // 'this' is still a reference to the element, before removing it
});

// some other js code here [...]

$('#some-element').remove();

注意:其他海报已经概述了这个答案的一些问题.

1. 通过html() replace()或其他jQuery方法删除节点时,这将不起作用
2. 这个事件冒出来了
3. jQuery UI覆盖也会删除

这个问题最优雅的解决方案似乎是:https://stackoverflow.com/a/10172676/216941

Answer 5

挂钩.remove()是不是因为有许多方法来删除页面元素(例如,通过使用来处理这一点的最好办法.html(),.replace()等).

为了防止各种内存泄漏危险,内部jQuery将尝试jQuery.cleanData()为每个被删除的元素调用该函数,而不管用于删除它的方法如何.

有关更多详细信息,请参阅此答案:javascript内存泄漏

因此,为了获得最佳结果,您应该挂钩cleanData函数,这正是jquery.event.destroyed插件的作用:

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js

Answer 6

对于那些使用jQuery UI的人:

jQuery UI的重写了一些jQuery方法来实现remove这不仅受到处理的事件,当你明确移除给定的元素,而且如果该元素被从DOM任何自洁jQuery方法移除(例如replace,html等) .这基本上允许您将挂钩放入jQuery"清理"与DOM元素关联的事件和数据时触发的相同事件中.

John Resig表示他对未来版本的jQuery核心中实现此事件的想法持开放态度,但我不确定它目前的位置.

Answer 7

只需要 jQuery（不需要 jQuery UI）

（我已经从 jQuery UI 框架中提取了这个扩展）

兼容于：empty()和html()和remove()

$.cleanData = ( function( orig ) {
    return function( elems ) {
        var events, elem, i;
        for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
            try {

                // Only trigger remove when necessary to save time
                events = $._data( elem, "events" );
                if ( events && events.remove ) {
                    $( elem ).triggerHandler( "remove" );
                }

            // Http://bugs.jquery.com/ticket/8235
            } catch ( e ) {}
        }
        orig( elems );
    };
} )( $.cleanData );

使用此解决方案，您还可以取消绑定事件处理程序。

$("YourElemSelector").off("remove");

尝试一下！- 例子

$.cleanData = ( function( orig ) {
    return function( elems ) {
        var events, elem, i;
        for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
            try {

                // Only trigger remove when necessary to save time
                events = $._data( elem, "events" );
                if ( events && events.remove ) {
                    $( elem ).triggerHandler( "remove" );
                }

            // Http://bugs.jquery.com/ticket/8235
            } catch ( e ) {}
        }
        orig( elems );
    };
} )( $.cleanData );

$("YourElemSelector").off("remove");

附加演示 - jsBin