只需要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); $("#DivToBeRemoved").on("remove", function() { console.log("div was removed event fired"); }); $("p").on("remove", function() { console.log("p was removed event fired"); }); $("span").on("remove", function() { console.log("span was removed event fired"); }); // $("span").off("remove"); $("#DivToBeRemoved").on("click", function() { console.log("Div was clicked"); }); function RemoveDiv() { // $("#DivToBeRemoved").parent().html(""); $("#DivToBeRemoved").remove(); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>OnRemove event handler attached to elements `div`, `p` and `span`.</h3> <div class="container"> <br> <button onclick="RemoveDiv();">Click here to remove div below</button> <div id="DivToBeRemoved"> DIV TO BE REMOVED contains 1 p element which in turn contains a span element <p>i am p (within div) <br><br><span>i am span (within div)</span></p> </div> </div>

附加演示- jsBin

我喜欢mtkopone使用jQuery特殊事件的答案，但请注意，它不能工作a)当元素被分离而不是删除或b)当一些旧的非jQuery库使用innerHTML破坏你的元素

为此，可以使用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'){…｝

我不能得到这个答案与解绑定工作(尽管更新见这里)，但能够想出一个办法。答案是创建一个“destroy_proxy”特殊事件，触发一个“destroyed”事件。你把事件监听器放在'destroyed_proxy'和'destroyed'上，然后当你想解除绑定时，你只需要解除'destroyed'事件的绑定:

var count = 1;
(function ($) {
    $.event.special.destroyed_proxy = {
        remove: function (o) {
            $(this).trigger('destroyed');
        }
    }
})(jQuery)

$('.remove').on('click', function () {
    $(this).parent().remove();
});

$('li').on('destroyed_proxy destroyed', function () {
    console.log('Element removed');
    if (count > 2) {
        $('li').off('destroyed');
        console.log('unbinded');
    }
    count++;
});

这里有一把小提琴

刚刚检查过，它已经内置在当前版本的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/

对于那些使用jQuery UI的人:

jQuery UI已经覆盖了一些jQuery方法来实现remove事件，该事件不仅在你显式删除给定元素时被处理，而且在元素被任何自清理jQuery方法(例如replace, html等)从DOM中删除时也会被处理。这基本上允许您在jQuery“清理”与DOM元素相关的事件和数据时，将钩子放入相同的事件中。

John Resig表示，他愿意在未来版本的jQuery核心中实现这个事件，但我不确定它目前的位置。