jQuery Surveillez les changements DomElement?

Question

J'ai un rappel ajax qui injecte le balisage HTML dans un div bas de page.

Ce que je ne peux pas comprendre comment créer un moyen de surveiller la div quand il est de modifier le contenu. Placer la logique de mise en page que je suis en train de créer dans le rappel n'est pas une option que chaque méthode (rappel et ma mise en page gestionnaire div) ne devrait pas savoir de l'autre.

Idéalement, je voudrais voir une sorte de gestionnaire d'événements semblable à $('#myDiv').ContentsChanged(function() {...}) ou $('#myDiv').TriggerWhenContentExists( function() {...})

J'ai trouvé un plugin appelé et montre une version améliorée de ce plug-in, mais ne pouvait jamais ni à déclencher. J'ai essayé « regarder » tout ce que je pouvais penser (à savoir la propriété de hauteur de la div étant modifiée via l'injection ajax) mais n'a pas pu les amener à faire quoi que ce soit du tout.

Les pensées / help?

Answer 1

La façon la plus efficace que j'ai trouvé est de se lier à l'événement DOMSubtreeModified. Il fonctionne bien avec la $.html() des deux jQuery et via la propriété standard innerHTML de JavaScript.

$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

http://jsfiddle.net/hnCxK/

Lorsqu'il est appelé à partir de $.html() jQuery, j'ai trouvé l'événement se déclenche deux fois: une fois pour effacer le contenu existant et une fois pour le définir. Une vérification rapide .length-fonctionnera dans les implémentations simples.

Il est également important de noter que l'événement toujours feu lorsqu'il est réglé sur une chaîne HTML (c.-à-'<p>Hello, world</p>'). Et que l'événement ne feu quand a changé pour les chaînes de texte brut.

Answer 2

Vous pouvez écouter les modifications apportées aux éléments DOM (votre div par exemple) en se liant sur DOMCharacterDataModified testé en chrome, mais ne fonctionne pas dans IE voir un démo ici
En cliquant sur le bouton provoque un changement dans la div qui est surveillé, ce qui remplit une autre div vous montrer son travail ...

---

Avoir un peu plus d'un regard Shiki 's réponse à < a href = "https://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly"> jquery écouter les changements dans un div et d'agir en conséquence regarde comme il devrait faire ce que vous voulez:

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

Dans votre fonction qui met à jour la div:

$('#idOfDiv').trigger('contentchanged');

voir cela comme une travail démo ici

Answer 3

Il y a une bibliothèque javascript propre, mutation résumé par Google, qui vous permet d'observer dom change de façon concise. La grande chose à ce sujet, est que si vous voulez, vous pouvez être informé que des actions effectivement fait une différence dans les DOM, pour comprendre ce que je veux dire, vous devriez regarder la vidéo très instructif sur la page d'accueil du projet.

lien: http://code.google.com/p/mutation-summary/

wrapper jquery: https://github.com/joelpurra/jquery-mutation-summary

Answer 4

Vous pouvez regarder dans l'événement DOMNodeInserted pour Firefox / Opera / Safari et l'événement onPropertyChange pour IE. Il ne serait probablement pas trop difficile d'utiliser ces événements, mais il est peut-être un petit hack-ish. Voici une documentation d'événements javascript: http://help.dottoro.com/larrqqck.php