Ich versuche herauszufinden, wie man js-Code ausführt, wenn ein Element von der Seite entfernt wird:
jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */
Gibt es eine Veranstaltung, die darauf zugeschnitten ist?
jQuery('#some-element').onremoval( function() {
// do post-mortem stuff here
});
Vielen Dank.
Antworten:
Gerade überprüft, ist es bereits in der aktuellen Version von JQuery integriert:
jQuery - v1.9.1
jQuery UI - v1.10.2
Wichtig : Dies ist die Funktionalität des Jquery-UI- Skripts (nicht von JQuery). Sie müssen also beide Skripte (jquery und jquery-ui) laden, damit es funktioniert. Hier ist ein Beispiel: http://jsfiddle.net/72RTz/
quelle
remove
für das Element tun , wird es ausgelöst, aber wenn das Element auf andere Weise zerstört wird, indem es beispielsweise überschrieben wird, funktioniert es nicht.Hierfür können Sie jQuery-Sonderereignisse verwenden .
In aller Einfachheit,
Konfiguration:
Verwendung:
Nachtrag zur Beantwortung der Kommentare von Pierre und DesignerGuy:
Um den Rückruf beim Aufrufen nicht auszulösen
$('.thing').off('destroyed')
, ändern Sie die if-Bedingung in:if (o.handler && o.type !== 'destroyed') { ... }
quelle
o.handler()
, dao.handler.apply(this,arguments)
sonst die Ereignis- und Datenobjekte nicht durch den Ereignis-Listener geleitet werden.$('.thing').unbind('destroyed')
Beachten Sie, dass der Handler aufgerufen wird, wenn Sie wirklich nervig sein könnten (da Unbind bedeutet, dass der Handler nicht aufgerufen werden soll ...)Sie können an das DOMNodeRemoved-Ereignis binden (Teil der DOM Level 3 WC3-Spezifikation).
Funktioniert in IE9, den neuesten Versionen von Firefox und Chrome.
Beispiel:
Sie können auch eine Benachrichtigung erhalten, wenn Elemente eingefügt werden, indem Sie an binden
DOMNodeInserted
quelle
e.target.className
oderif ($(e.target).hasClass('my-class')) { ...
.Es gibt kein integriertes Ereignis zum Entfernen von Elementen, aber Sie können eines erstellen, indem Sie die Standard-Entfernungsmethode von jQuery fälschlicherweise erweitern. Beachten Sie, dass der Rückruf aufgerufen werden muss, bevor er tatsächlich entfernt wird, um die Referenz beizubehalten.
Hinweis: Einige Probleme mit dieser Antwort wurden von anderen Postern beschrieben.
html()
replace()
oder andere jQuery-Methoden entfernt wirdDie eleganteste Lösung für dieses Problem scheint zu sein: https://stackoverflow.com/a/10172676/216941
quelle
$('#some-element').bind('remove', function(ev) { if (ev.target === this) { console.log('removed!'); } });
Anspannen
.remove()
ist nicht der beste Weg , dies zu handhaben, da es viele Möglichkeiten gibt , Elemente von der Seite zu entfernen (zB durch Verwendung.html()
,.replace()
usw.).Um verschiedene Gefahren für Speicherverluste zu vermeiden, versucht jQuery intern, die Funktion
jQuery.cleanData()
für jedes entfernte Element aufzurufen, unabhängig von der Methode, mit der es entfernt wurde.Weitere Informationen finden Sie in dieser Antwort: Javascript-Speicherlecks
Um die besten Ergebnisse zu erzielen , sollten Sie die
cleanData
Funktion einbinden. Genau das macht das Plugin jquery.event.destroyed :http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js
quelle
cleanData
war sehr hilfreich für mich! Vielen Dank, Joe :)Für diejenigen, die die jQuery-Benutzeroberfläche verwenden:
jQuery UI hat einige der jQuery - Methoden außer Kraft gesetzt ein implementieren
remove
Ereignis , das nicht nur behandelt wird , wenn Sie explizit das gegebene Element entfernen, sondern auch , wenn das Element wird aus dem DOM durch irgendwelche selbstreinig jQuery Methoden entfernt (zBreplace
,html
usw.) . Auf diese Weise können Sie im Grunde genommen dieselben Ereignisse einbinden, die ausgelöst werden, wenn jQuery die mit einem DOM-Element verknüpften Ereignisse und Daten "bereinigt".John Resig hat angedeutet, dass er offen für die Idee ist, dieses Ereignis in einer zukünftigen Version von jQuery Core zu implementieren, aber ich bin mir nicht sicher, wo es derzeit steht.
quelle
Es ist nur jQuery erforderlich (keine jQuery-Benutzeroberfläche erforderlich)
( Ich habe diese Erweiterung aus dem jQuery-UI-Framework extrahiert. )
Funktioniert mit:
empty()
undhtml()
undremove()
Mit dieser Lösung können Sie auch den Event-Handler aufheben .
Versuch es! - Beispiel
Zusätzliche Demo - jsBin
quelle
Ich konnte diese Antwort nicht zum Aufheben der Bindung verwenden (trotz des hier gezeigten Updates ), konnte aber einen Weg finden, um sie zu umgehen. Die Antwort war, ein spezielles Ereignis "destroy_proxy" zu erstellen, das ein "zerstörtes" Ereignis auslöste. Sie setzen den Ereignis-Listener sowohl auf 'destroy_proxy' als auch auf 'destroy'. Wenn Sie dann die Bindung aufheben möchten, lösen Sie einfach die Verbindung zwischen dem "zerstörten" Ereignis:
Hier ist eine Geige
quelle
Ich mag die Antwort von mtkopone mit jQuery-Sonderereignissen, aber beachte, dass es nicht funktioniert, a) wenn Elemente getrennt statt entfernt werden oder b) wenn einige alte Nicht-jquery-Bibliotheken innerHTML verwenden, um Ihre Elemente zu zerstören
quelle
detach
wird insbesondere verwendet, um keine Bereinigung auszulösen, da das Element wahrscheinlich später wieder angebracht werden soll. b) ist immer noch wahr und hat noch keine zuverlässige Handhabung, zumindest da DOM-Mutationsereignisse weit verbreitet sind.Ich bin mir nicht sicher, ob es dafür ein Ereignishandle gibt. Sie müssten also eine Kopie des DOM aufbewahren und in einer Art Abfrageschleife mit dem vorhandenen DOM vergleichen - was ziemlich unangenehm sein könnte. Firebug tut dies jedoch - wenn Sie den HTML-Code überprüfen und einige DOM-Änderungen ausführen, werden die Änderungen in der Firebug-Konsole für kurze Zeit gelb hervorgehoben.
Alternativ können Sie eine Entfernungsfunktion erstellen ...
quelle
So erstellen Sie einen jQuery Live Listener zum Entfernen :
Oder:
quelle
Das Ereignis "remove" aus jQuery funktioniert ohne Zusatz einwandfrei. Es könnte mit der Zeit zuverlässiger sein, einen einfachen Trick zu verwenden, anstatt jQuery zu patchen.
Ändern oder fügen Sie einfach ein Attribut in dem Element hinzu, das Sie aus dem DOM entfernen möchten. Somit können Sie mit dem Attribut "do_not_count_it" jede Aktualisierungsfunktion auslösen, die Elemente auf dem Weg zur Zerstörung einfach ignoriert.
Angenommen, wir haben eine Tabelle mit Zellen, die den Preisen entsprechen, und Sie müssen nur den letzten Preis anzeigen: Dies ist der Selektor, der ausgelöst wird, wenn eine Preiszelle gelöscht wird (in jeder Zeile der Tabelle befindet sich eine Schaltfläche, die dies nicht anzeigt) Hier)
Und hier ist eine Funktion, die den letzten Preis in der Tabelle findet, ohne den letzten zu berücksichtigen, wenn dieser entfernt wurde. In der Tat wird das Element noch nicht entfernt, wenn das Ereignis "Entfernen" ausgelöst wird und wenn diese Funktion aufgerufen wird.
Am Ende funktioniert die Funktion update_prices () einwandfrei, und danach wird das DOM-Element entfernt.
quelle
Verweis auf @ David Antwort:
Wenn Sie dies mit einer anderen Funktion tun möchten, z. html () wie in meinem Fall, vergessen Sie nicht, return in der neuen Funktion hinzuzufügen:
quelle
Dies.
quelle
Eine Erweiterung von Adams Antwort, falls Sie die Standardeinstellung überwinden müssen. Hier ist eine Problemumgehung:
quelle
Wir können auch DOMNodeRemoved verwenden:
quelle