我试图弄清楚如何执行一些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
});

当前回答

这是如何创建一个jQuery实时删除监听器:

$(document).on('DOMNodeRemoved', function(e)
{
  var $element = $(e.target).find('.element');
  if ($element.length)
  {
    // do anything with $element
  }
});

Or:

$(document).on('DOMNodeRemoved', function(e)
{
  $(e.target).find('.element').each(function()
  {
    // do anything with $(this)
  }
});

其他回答

jQuery的“remove”事件工作正常,没有添加。它可能是更可靠的使用一个简单的技巧,而不是补丁jQuery。

只需在要从DOM中删除的元素中修改或添加一个属性。因此,您可以使用属性“do_not_count_it”触发任何更新函数,该函数将忽略正在被销毁的元素。

假设我们有一个表格,单元格对应的价格,你只需要显示最后的价格: 这是在价格单元格被删除时触发的选择器(我们在表格的每一行中都有一个按钮,这里没有显示)

$('td[validity="count_it"]').on("remove", function () {
    $(this).attr("validity","do_not_count_it");
    update_prices();
});

这里有一个函数查找表中最后一个价格,不考虑最后一个价格,如果它是被删除的价格。实际上,当"remove"事件被触发,并且当这个函数被调用时,元素还没有被删除。

function update_prices(){
      var mytable=$("#pricestable");
      var lastpricecell = mytable.find('td[validity="count_it"]').last();
}

最后,update_prices()函数正常工作,然后,DOM元素被删除。

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

参考@David的回答:

当你想做soo与另一个函数,例如。Html()就像在我的情况下,不要忘记在新函数中添加return:

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

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

只需要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