jQuery - un événement Déclencheur, lorsqu'un élément est supprimé de la DOM
Je suis à essayer de comprendre comment exécuter un code js lorsqu'un élément est supprimé de la page:
jQuery('#some-element').remove(); //remove some element from the page
/* need to figure out how to independently detect the above happened */
est-il un événement sur mesure pour que, quelque chose comme:
jQuery('#some-element').onremoval( function() {
//do post-mortem stuff here
});
grâce.
par curiosité, quelle aurait envie de faire avec l'élément qui a été supprimé?
J'ai un élément indépendant qui s'attache à la pièce que j'ai supprimer, donc je veux détecter lorsque cette pièce est allé à éliminer cet élément. J'ai pu re-conception de l'ensemble de la chose, mais l'accomplissement de la ci-dessus va me faire gagner beaucoup de temps (et le code).
J'ai un élément indépendant qui s'attache à la pièce que j'ai supprimer, donc je veux détecter lorsque cette pièce est allé à éliminer cet élément. J'ai pu re-conception de l'ensemble de la chose, mais l'accomplissement de la ci-dessus va me faire gagner beaucoup de temps (et le code).
OriginalL'auteur sa125 | 2010-02-04
Vous devez vous connecter pour publier un commentaire.
Viens de vérifier, il est déjà intégré dans la version actuelle de JQuery:
jQuery v1.9.1
jQuery UI - v1.10.2
Important: Cette fonctionnalité est de Jquery UI script (pas JQuery), de sorte que vous devez charger à la fois des scripts (jquery et jquery-ui) pour le faire fonctionner. Ici est un exemple: http://jsfiddle.net/72RTz/
Est-ce documenté nulle part? Je viens de regarder à travers le jQuery UI widget de la documentation et ne pouvais pas trouver une mention de cela. Tiens pour voir si c'est officiellement pris en charge / les mises en garde sur l'utilisation de...
Ce n'est pas du travail essayé en jQuery 1.10.2, cependant la réponse ci-dessous par @mtkopone fonctionne parfaitement donc je voterais pour la mise à jour de la réponse à cette question
Celui-ci seulement en partie les travaux. Si vous ne
remove
sur l'élément déclenche, mais si l'élément est détruit d'une autre manière, par l'écrasement de dire, il ne fonctionne pas.Vous avez peut-être raison, il y a probablement d'autres nom de l'événement pour ce cas. Ce serait formidable si vous pouvez fournir jsfiddle de l'échantillon pour votre cas.
OriginalL'auteur Philipp Munin
Vous pouvez utiliser jQuery événements spéciaux pour cela.
En toute simplicité,
De l'installation:
Utilisation:
Additif pour répondre à Pierre et DesignerGuy commentaires:
De ne pas avoir le rappel de feu lors de l'appel de
$('.thing').off('destroyed')
, changer la condition si:if (o.handler && o.type !== 'destroyed') { ... }
+1 avait réussi à passer complètement à côté de ces événements jusqu'à maintenant, vachement utile! Une chose à l'état juste après avoir mis en œuvre ce qui précède, il serait mieux de changer
o.handler()
ào.handler.apply(this,arguments)
sinon, les événements et les objets de données n'obtenez pas passé à travers l'écouteur d'événement.Cela ne fonctionne pas lorsque vous supprimez des éléments sans jQuery.
cela ne fonctionne pas a) lorsque les éléments sont détachés au lieu de supprimé ou b) lorsque certains vieux non bibliothèques jquery utiliser innerHTML pour détruire vos éléments (similaire à ce qui djjeck dit)
Méfiez-vous de ce gestionnaire est appelé lorsque vous
$('.thing').unbind('destroyed')
qui pourrait être vraiment gênant (depuis unbind signifie que nous ne voulons pas que le gestionnaire doit être appelé...)OriginalL'auteur mtkopone
Vous pouvez lier à la DOMNodeRemoved événement (partie de DOM Niveau 3 WC3 spec).
Travaille dans IE9, dernières versions de Firefox et de Chrome.
Exemple:
Vous pouvez également recevoir des avis lorsque des éléments sont l'insertion par la liaison à
DOMNodeInserted
Remarque: "l'Ajout de DOM mutation auditeurs à un document profondément dégrade les performances des autres DOM modifications à ce document (1.5 - 7 fois plus lent!)." from: developer.mozilla.org/en/DOM/Mutation_events
L'amour, bien que nodeName est rarement utile pour moi. Je viens de l'utiliser
e.target.className
ouif ($(e.target).hasClass('my-class')) { ...
.Ce n'est pas de travailler sur l'élément lui-même, seulement de ses enfants.
Incroyable réponse! M'a vraiment aidé!
OriginalL'auteur Adam
Il n'est pas intégré dans le cas de la suppression d'éléments, mais vous pouvez en créer un faux-extension de jQuery par défaut de supprimer la méthode. Notez que la fonction de rappel doit être appelée avant de les supprimer pour garder une référence.
Remarque: certains problèmes avec cette réponse ont été décrits par d'autres affiches.
html()
replace()
ou d'autres méthodes jQueryLa solution la plus élégante à ce problème semble être: https://stackoverflow.com/a/10172676/216941
$('#some-element').bind('remove', function(ev) { if (ev.target === this) { console.log('removed!'); } });
Ce n'était pas le travail hors de la boîte pour moi - j'ai dû retourner le résultat de orig.s'appliquent.
En fait, @Adam, il est, mais c'est la croix-navigateur compatible. Avec meyertee/fturtle des additions c'est une parfaite solution fiable, tant que vous ne retirez éléments avec cette méthode, plutôt que de modifier vidange/HTML, etc ... Pour quelque chose de plus souple, oui DOM mutation événements sont bien, mais j'ai été sceptique d'entre eux que vous devriez être à l'écoute pour des événements d'affaires dans une application, pas DOM ceux dont la structure est susceptible de changer avec le développement. Aussi, en vous inscrivant à DOM mutation événements signifie que votre programme est potentiellement sensibles à la traîne dans un complexe DOM hiérarchies.
Mon seul diagreement sur l'exactitude est l'énoncé "il n'est pas construit dans le cas de la suppression d'éléments' --- il EST un construit dans de l'événement pour les navigateurs qui implémentent Niveau 3 événements DOM (comme indiqué dans ma réponse).
Tout cela permet de déceler des éléments supprimés à l'aide de la "supprimer" de la fonction, il ne pourra pas détecter les éléments supprimés par d'autres moyens (par ex. à l'aide de jQuery html, remplacer, etc). S'il vous plaît, voir ma réponse plus complète de la solution.
OriginalL'auteur David Hellsing
Accrochage
.remove()
n'est pas la meilleure façon de gérer ce qu'il y a de nombreuses façons de supprimer des éléments de la page (par exemple en utilisant.html()
,.replace()
, etc).Afin de prévenir les diverses fuite de mémoire dangers, en interne jQuery vais essayer d'appeler la fonction
jQuery.cleanData()
pour chaque retiré élément indépendamment de la méthode utilisée pour l'enlever.Voir cette réponse pour plus de détails: javascript fuites de mémoire
Donc, pour de meilleurs résultats, vous devriez accrocher le
cleanData
fonction, ce qui est exactement ce que les jquery.de l'événement.détruit plugin n':http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js
cleanData
a été très utile pour moi! Merci beaucoup, Joe 🙂Belle réponse, mais encore qui ne fonctionne que pour les méthodes jQuery. Si vous êtes à l'intégration avec une autre plate-forme qui peut "tirer le tapis de sous - Adam est la réponse la plus logique.
OriginalL'auteur zah
Pour ceux qui utilisent jQuery UI:
jQuery UI a annulé certaines des méthodes jQuery pour mettre en œuvre un
remove
événement qui est prise en charge non seulement lorsque vous supprimer explicitement l'élément donné, mais aussi si l'élément est supprimé de la DOM par un auto-nettoyage des méthodes jQuery (par exemplereplace
,html
, etc.). Cela permet essentiellement de mettre un crochet dans la même des événements qui sont déclenchés lorsque jQuery est de "nettoyer" les événements et les données associées à un élément du DOM.John Resig a indiqué qu'il est ouvert à l'idée de la mise en œuvre de cet événement dans une future version de jQuery de base, mais je ne suis pas sûr de l'endroit où il se trouve actuellement.
OriginalL'auteur StriplingWarrior
Je ne pouvais pas obtenir cette réponse de travailler avec la déliaison (malgré la mise à jour voir ici), mais a été en mesure de trouver un moyen de contourner cela. La réponse était de créer une "destroy_proxy' événement spécial qui a déclenché une "détruits" de l'événement. Vous mettez l'écouteur d'événement sur les deux 'destroyed_proxy" et "détruit", puis, lorsque vous voulez vous séparer, vous venez de séparer la "détruits" de l'événement:
Ici est un violon
OriginalL'auteur Bill Johnston
J'aime mtkopone de la réponse à l'aide de jQuery événements spéciaux, mais notez que cela ne fonctionne pas a) lorsque les éléments sont détachés au lieu de supprimé ou b) lorsque certains vieux non bibliothèques jquery utiliser innerHTML pour détruire vos éléments
detach
est utilisé surtout pour ne pas déclencher de nettoyage puisque l'élément est probablement prévu pour être rattachée plus tard. b) est toujours vraie, et n'a pas encore de gestion fiable, au moins depuis les DOM événements mutationnels être largement mises en œuvre.Je parie que vous avez fait cela juste pour obtenir la "critique" badge 😉
OriginalL'auteur Charon ME
Je ne suis pas sûr qu'il y est un événement de la poignée pour cela, vous devez conserver une copie de DOM et de comparer les DOM existant dans une sorte de boucle d'interrogation - qui pourrait être assez méchant. Firebug ne ce - si vous examinez le code HTML et d'exécuter certains DOM-changements, il met en évidence les changements en jaune dans la console de Firebug pour un court laps de temps.
Alternativement, vous pouvez créer une fonction de suppression...
OriginalL'auteur Fenton
C'est la façon de créer un jQuery vivre supprimer auditeur:
Ou:
OriginalL'auteur Buzogany Laszlo
La "suppression" de l'événement à partir de jQuery fonctionne très bien, sans plus. Il pourrait être plus fiable dans le temps, à utiliser un truc tout simple, au lieu de patcher jQuery.
Juste de modifier ou d'ajouter un attribut dans l'élément que vous êtes sur le point de retirer de la DOM. Ainsi, vous pouvez déclencher une fonction de mise à jour, qui va juste ignorer les éléments sur la façon d'être détruit, avec l'attribut "do_not_count_it".
Supposons que nous avons un tableau avec des cellules correspondant aux prix, et que vous avez besoin de montrer que le dernier prix:
C'est le sélecteur pour déclencher lorsqu'un prix de la cellule est supprimée (nous avons un bouton dans chaque ligne de la table en faisant cela, non représenté ici)
Et voici une fonction qui trouve le dernier prix dans le tableau, ne tenant pas compte de la dernière, si elle était l'une qui a été supprimé. En effet, lors de la "suppression" de l'événement est déclenché, et lorsque cette fonction est appelée, l'élément n'est pas supprimé encore.
En fin de compte, la update_prices() fonctionne très bien, et après que, l'élément DOM est supprimé.
OriginalL'auteur philippe
le référencement @David réponse:
Lorsque Vous voulez faire soo, avec une autre fonction, par exemple. html() comme dans mon cas, n'oubliez pas d'ajouter le retour en nouvelle fonction:
OriginalL'auteur Patryk M
.
OriginalL'auteur Matas Vaitkevicius