web-dev-qa-db-fra.com

Comment détecter l'élément ajouté / supprimé de l'élément dom?

Dis que j'avais un div#parent et I append et remove éléments en utilisant jquery. Comment pourrais-je détecter lorsqu'un tel événement se produit sur le div#parent élément?

javascriptjqueryhtmlhtml5
38
Derek

Utilisez Observateurs de mutations comme suggéré par @Qantas dans son réponse

Les méthodes suivantes sont déconseillées

Vous pouvez utiliser DOMNodeInserred et DOMNodeRemoved

$("#parent").on('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

$("#parent").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' was removed');
});

Documents MDN

21
Satpal

N'utilisez pas d'événements de mutation comme DOMNodeInserred et DOMNodeRemoved.

Au lieu de cela, utilisez DOM Mutation Observers , qui sont pris en charge dans tous les navigateurs modernes à l'exception d'IE10 et inférieurs ( Puis-je utiliser ). Les observateurs de mutations sont destinés à remplacer les événements de mutation (qui ont été dépréciés), car ils se sont avérés avoir de faibles performances en raison de défauts de conception .

var x = new MutationObserver(function (e) {
  if (e[0].removedNodes) console.log(1);
});

x.observe(document.getElementById('parent'), { childList: true });
86
Qantas 94 Heavy

Vous devez lier DOMSubtreeModified événement

$("#parent").bind("DOMSubtreeModified",function(){
  console.log('changed');
});

http://jsfiddle.net/WQeM3/

2
mdolbin