jQuery - Evento di trigger quando un elemento viene rimosso dal DOM


Answers

Puoi utilizzare eventi speciali di jQuery per questo.

In tutta semplicità,

Impostare:

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

Uso:

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

Addendum per rispondere ai commenti di Pierre e DesignerGuy:

Per non if (o.handler && o.type !== 'destroyed') { ... } del callback quando si chiama $('.thing').off('destroyed') , cambia la condizione if in: if (o.handler && o.type !== 'destroyed') { ... }

Question

Sto cercando di capire come eseguire un codice js quando un elemento viene rimosso dalla pagina:

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

c'è un evento su misura per questo, qualcosa come:

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

Grazie.




Non esiste un evento integrato per la rimozione di elementi, ma è possibile crearne uno tramite il metodo di rimozione predefinito jQuery che estende l'estensione. Si noti che il callback deve essere richiamato prima di rimuoverlo effettivamente per mantenere il riferimento.

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

Nota: alcuni problemi con questa risposta sono stati delineati da altri poster.

  1. Questo non funzionerà quando il nodo viene rimosso tramite html() replace() o altri metodi jQuery
  2. Questo evento bolle
  3. Anche le sostituzioni dell'interfaccia utente jQuery rimuovono

La soluzione più elegante a questo problema sembra essere: https://.com/a/10172676/216941




facendo riferimento a @David answer:

Quando vuoi fare soo con un'altra funzione, ad es. html () come nel mio caso, non dimenticare di aggiungere return in new function:

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



Per coloro che usano l'interfaccia utente di jQuery:

L'interfaccia utente jQuery ha scavalcato alcuni dei metodi jQuery per implementare un evento remove che viene gestito non solo quando si rimuove esplicitamente l'elemento specificato, ma anche se l'elemento viene rimosso dal DOM da qualsiasi metodo jQuery autopulente (ad esempio, replace , html , eccetera.). In pratica, questo ti consente di mettere un gancio negli stessi eventi che vengono generati quando jQuery sta "ripulendo" gli eventi e i dati associati a un elemento DOM.

John Resig ha dichiarato di essere aperto all'idea di implementare questo evento in una futura versione di jQuery core, ma non sono sicuro di dove si trovi attualmente.




Non sono sicuro che ci sia un handle di evento per questo, quindi dovresti tenere una copia del DOM e confrontarla con il DOM esistente in una sorta di ciclo di polling, che potrebbe essere piuttosto sgradevole. Firebug lo fa però: se controlli l'HTML ed esegui alcune modifiche al DOM, evidenzia le modifiche in giallo nella console di Firebug per un breve periodo.

In alternativa, puoi creare una funzione di rimozione ...

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



Mi piace la risposta di mtkopone usando gli eventi speciali di jQuery, ma nota che non funziona a) quando gli elementi vengono rimossi anziché rimossi o b) quando alcune vecchie librerie non jquery usano innerHTML per distruggere i tuoi elementi