Détecter les modifications du contenu de l'élément avec jQuery

Question

change() function fonctionne et détecte les changements sur les éléments de formulaire, mais existe-t-il un moyen de détecter le changement de contenu d'un élément DOM?

Cela ne fonctionne pas, sauf si #content est un élément de formulaire

 $("#content").change( function(){
    // do something
});
 

Je veux que cela se déclenche quand on fait quelque chose comme:

 $("#content").html('something');
 

De plus, les fonctions html() ou append() n'ont pas de rappel.

Aucune suggestion?

Answer 1

Je sais que ce post est d'un an, mais je souhaite apporter une autre approche de la solution pour ceux qui ont un problème similaire:

1. Le jQuery événement de changement est uniquement utilisé sur les champs de saisie de l'utilisateur, parce que si tout le reste est manipulé (par exemple, un "div"), que la manipulation est à venir à partir du code. Donc, trouver où la manipulation se produit, puis ajouter tout ce dont vous avez besoin.

2. Mais si ce n'est pas possible pour une raison quelconque (vous êtes à l'aide d'un compliqué plugin ou ne pouvez pas trouver un "rappel" possibilités), alors le jQuery approche que je te suggère:

   un. Pour la simple manipulation du DOM, l'utilisation de jQuery chaînage et traversant, $("#content").html('something').end().find(whatever)....

   b. Si vous souhaitez faire quelque chose d'autre, utilisent jQuery bind avec des événements personnalisés et triggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });
   

Voici un lien vers jQuery déclencher gestionnaire: http://api.jquery.com/triggerHandler/

Answer 2

Ce sont des événements de mutation .

Je n'ai pas utilisé les API d'événement de mutation dans jQuery, mais une recherche rapide m'a conduit à ce projet sur GitHub. Je ne suis pas au courant de la maturité du projet.

Answer 3

Le navigateur ne déclenche pas l'événement onchange pour <div> - éléments.

Je pense que le raisonnement derrière cela est que ces éléments ne changera pas à moins d'être modifiées par du javascript. Si vous êtes déjà avoir à modifier l'élément de vous-même (plutôt que l'utilisateur de le faire), alors vous pouvez simplement appeler le code associé à la même fois que vous modifiez l'élément, comme suit:

 $("#content").html('something').each(function() { });

Vous pouvez également manuellement le feu à un événement comme celui-ci:

 $("#content").html('something').change();

Si aucune de ces solutions ne fonctionne pour votre situation, pourriez-vous nous donner plus d'informations sur ce que vous cherchez à accomplir?

Answer 4

Essayez de vous lier à l'événement DOMSubtreeModified comme test est également une partie du DOM.

voir ce post ici sur SO:

comment-faire-surveiller-le-dom-pour-les-changements

Answer 5

Essayez ceci, il a été créé par James Padolsey (JP ici sur SO) et fait exactement ce que vous voulez (je pense)

http://james.padolsey.com/javascript/monitoring-dom-properties/