web-dev-qa-db-fra.com

jQuery veillez aux changements domElement?

J'ai un rappel ajax qui injecte du balisage html dans une div de pied de page.

Ce que je ne peux pas comprendre, c'est comment créer un moyen de surveiller la div lorsque son contenu change. Placer la logique de disposition que j'essaye de créer dans le rappel n'est pas une option car chaque méthode (rappel et mon gestionnaire de div de disposition) ne devrait pas connaître l'autre.

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

J'ai trouvé un plugin appelé watch et une version améliorée de ce plugin mais je n'ai jamais réussi à déclencher. J'ai essayé de "regarder" tout ce à quoi je pouvais penser (c'est-à-dire que la propriété de la hauteur du div était modifiée via l'injection ajax), mais je n'ai pas pu leur faire quoi que ce soit.

Des pensées/aide?

javascriptjqueryjquery-pluginsjquery-events
34
jas

Le moyen le plus efficace que j'ai trouvé est de se lier à l'événement DOMSubtreeModified. Il fonctionne bien avec la fonction $.html() de jQuery et via la propriété innerHTML standard de JavaScript.

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

http://jsfiddle.net/hnCxK/

Lorsqu'il a été appelé à partir de $.html() de jQuery, j'ai trouvé que 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 de .length Fonctionnera dans des implémentations simples.

Il est également important de noter que l'événement se déclenchera toujours lorsqu'il est défini sur une chaîne HTML (c'est-à-dire '<p>Hello, world</p>'). Et que l'événement ne se déclenchera que s'il est modifié pour les chaînes de texte brut.

45
Courtney Christensen

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

Avoir un peu plus de look Shiki 's answer to jquery listen to changes within un div et agissez en conséquence on dirait qu'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 démo de travail ici

7
Scoobler

Il existe une bibliothèque javascript soignée, mutation-summary par google, qui vous permet d'observer les changements dom de manière concise. La grande chose à ce sujet, c'est que si vous le souhaitez, vous ne pouvez être informé que des actions qui ont réellement fait une différence dans le DOM, pour comprendre ce que je veux dire, vous devriez regarder la vidéo très informative sur la page d'accueil du projet.

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

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

4
Ricardo Freitas

Vous voudrez peut-être examiner l'événement DOMNodeInserred pour Firefox/Opera/Safari et l'événement onpropertychange pour IE. Il ne serait probablement pas trop difficile d'utiliser ces événements, mais cela pourrait être un peu hack-ish. Voici une documentation d'événement javascript: http://help.dottoro.com/larrqqck.php

3
rynlbrwn