Bir öğe sayfadan kaldırıldığında bazı js kodu yürütmek nasıl anlamaya çalışıyorum:

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

bunun için özel bir etkinlik var mı, şuna benzer:

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

Teşekkürler.

Yeni kontrol edildi, JQuery'nin şu anki sürümünde zaten yerleşik:

jQuery - v1.9.1

jQuery Kullanıcı Arayüzü - v1.10.2

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

Önemli : Bu Jquery UI betiğinin işlevselliğidir ( JQuery değil), bu nedenle çalışması için her iki betiği de (jquery ve jquery-ui) yüklemeniz gerekir. İşte örnek: http://jsfiddle.net/72RTz/

Bunun için jQuery özel etkinliklerini kullanabilirsiniz .

Tüm basitlikte,

Kurmak:

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

Kullanımı:

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

Pierre ve DesignerGuy'un yorumlarına cevap vermek için Zeyilname:

Arama yaparken geri aramanın $('.thing').off('destroyed')başlatılmaması için if koşulunu şu şekilde değiştirin:if (o.handler && o.type !== 'destroyed') { ... }

DOMNodeRemoved olayına (DOM Level 3 WC3 spesifikasyonunun bir parçası) bağlanabilirsiniz.

IE9'da çalışır, Firefox ve Chrome'un son sürümleri.

Misal:

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

Ayrıca, öğelere ekleme yaparak DOMNodeInserted

Öğeleri kaldırmak için yerleşik bir etkinlik yoktur, ancak sahte genişleyen jQuery'nin varsayılan kaldırma yöntemiyle bir etkinlik oluşturabilirsiniz. Referansı tutmak için geri aramanın kaldırılmadan önce çağrılması gerektiğini unutmayın.

(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();

Not: Bu yanıtla ilgili bazı sorunlar diğer posterler tarafından özetlenmiştir.

1. Düğüm yoluyla kaldırıldığında bu çalışmaz html() replace() veya diğer jQuery yöntemleri
2. Bu olay patlıyor
3. jQuery kullanıcı arayüzü geçersiz kılmaları da geçersiz kılar

Bu sorunun en zarif çözümü şöyledir: https://stackoverflow.com/a/10172676/216941

Çengel .remove(), sayfadan öğeleri kaldırmanın birçok yolu olduğundan (ör..html() ,.replace() vs.).

Çeşitli bellek sızıntısı tehlikelerini önlemek için, dahili olarak jQuery, jQuery.cleanData()kaldırmak için kullanılan yönteme bakılmaksızın, kaldırılan her öğe için işlevi çağırmayı dener .

Daha fazla ayrıntı için bu cevaba bakın: javascript bellek sızıntıları

Bu nedenle, en iyi sonuçlar için, jquery.event.destroyed eklentisinin yaptığı cleanDatatam olarak işlevi kancalamanız gerekir :

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

JQuery kullanıcı arayüzünü kullananlar için:

jQuery UI, removeyalnızca belirli bir öğeyi açıkça kaldırdığınızda değil, aynı zamanda öğe DOM'dan herhangi bir kendi kendini temizleyen jQuery yöntemiyle (örn replace. html, vb. . Bu temelde, jQuery bir DOM öğesiyle ilişkili olayları ve verileri "temizlerken" tetiklenen aynı olaylara bir kanca koymanıza izin verir.

John Resig, bu etkinliği jQuery çekirdeğinin gelecekteki bir sürümünde uygulama fikrine açık olduğunu belirtti, ancak şu anda nerede durduğundan emin değilim.

Sadece jQuery gereklidir (jQuery kullanıcı arayüzü gerekmez)

( Bu uzantıyı jQuery UI çerçevesinden çıkardım )

Şununla çalışır: empty()ve html()veremove()

$.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 );

Bu çözüm ile de yapabilirsiniz unbind olay işleyicisi.

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

Dene! - Misal

$.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>

Ek Demo - jsBin

( Buradaki güncellemeye rağmen) bağlama ile çalışmak için bu cevabı alamadım , ancak bunun etrafında bir yol bulabildim. Cevap, 'yokedilen' bir olayı tetikleyen bir 'destroy_proxy' özel etkinliği oluşturmaktı. Olay dinleyicisini hem 'destroyed_proxy' hem de 'destroyed' üzerine koydunuz, sonra bağlamak istediğinizde, sadece 'destroyed' olayını çözüyorsunuz:

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++;
});

İşte bir keman

Mtkopone'un jQuery özel etkinliklerini kullanarak yanıtını seviyorum, ancak a) öğelerin kaldırılmak yerine ayrıldığı veya b) bazı eski jquery olmayan kütüphanelerin öğelerinizi yok etmek için innerHTML kullandığını unutmayın.

Bunun için bir olay tanıtıcı olduğundan emin değilim, bu yüzden DOM'un bir kopyasını tutmanız ve bir çeşit yoklama döngüsünde mevcut DOM ile karşılaştırmanız gerekir - ki bu oldukça kötü olabilir. Firebug bunu yapar - HTML'yi inceler ve DOM değişikliklerini çalıştırırsanız, kısa bir süre Firebug konsolundaki sarı değişiklikleri vurgular.

Alternatif olarak, bir kaldırma işlevi oluşturabilirsiniz ...

var removeElements = function(selector) {
    var elems = jQuery(selector);

    // Your code to notify the removal of the element here...
    alert(elems.length + " elements removed");

    jQuery(selector).remove();
};

// Sample usage
removeElements("#some-element");
removeElements("p");
removeElements(".myclass");

Nasıl jQuery canlı kaldırma dinleyici oluşturmak için :

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

Veya:

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

JQuery "remove" olayı ek olmadan iyi çalışır. JQuery'yi yamalamak yerine basit bir hile kullanmak zaman içinde daha güvenilir olabilir.

DOM'dan kaldırmak üzere olduğunuz öğede bir özelliği değiştirin veya ekleyin. Böylece, "do_not_count_it" özniteliği ile yok edilecek yolda göz ardı edilecek herhangi bir güncelleme işlevini tetikleyebilirsiniz.

Diyelim ki fiyatlara karşılık gelen hücreleri içeren bir tablo var ve sadece son fiyatı göstermeniz gerekiyor: Bu, bir fiyat hücresi silindiğinde tetiklenecek seçicidir (tablonun her satırında bunu gösteren bir düğmemiz var, gösterilmiyor buraya)

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

Ve işte tablodaki son fiyatı bulan, sonuncuyu hesaba katmayan, kaldırılmış olan ise. Aslında, "remove" olayı tetiklendiğinde ve bu işlev çağrıldığında, öğe henüz kaldırılmaz.

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

Sonunda update_prices () işlevi iyi çalışır ve bundan sonra DOM öğesi kaldırılır.

@David cevabına referans:

Başka bir işlevle soo yapmak istediğinizde, örn. Benim durumumda olduğu gibi html (), yeni işlevde dönüş eklemeyi unutmayın:

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

Bu.

$.each(
  $('#some-element'), 
        function(i, item){
            item.addEventListener('DOMNodeRemovedFromDocument',
                function(e){ console.log('I has been removed'); console.log(e);
                })
         })

uzantısıdır Adem'in cevabı burada bir çalışma dönünce, PREVEND varsayılan gerekir örtmek:

$(document).on('DOMNodeRemoved', function(e){
        if($(e.target).hasClass('my-elm') && !e.target.hasAttribute('is-clone')){
            let clone = $(e.target).clone();
            $(clone).attr('is-clone', ''); //allows the clone to be removed without triggering the function again

            //you can do stuff to clone here (ex: add a fade animation)

            $(clone).insertAfter(e.target);
            setTimeout(() => {
                //optional remove clone after 1 second
                $(clone).remove();
            }, 1000);
        }
    });

DOMNodeRemoved'i de kullanabiliriz:

$("#youridwhichremoved").on("DOMNodeRemoved", function () {
// do stuff
})