Y a-t-il un écouteur de modifications de DOM de jQuery ?

Question

Essentiellement, je veux avoir un script à exécuter lorsque le contenu d’un DIV change. Étant donné que les scripts sont séparé (script contenu dans le script de page Web & extension chrome), j’ai besoin d’un moyen simplement observer les changements dans l’état de DOM. Je pourrais mettre en place les bureaux de vote, mais cela semble peu soignée.

Answer 1

Plusieurs années plus tard, il est maintenant officiellement une meilleure solution. DOM4 Mutation Observateurs sont le remplacement déprécié DOM3 mutation des événements. Ils sont actuellement mis en œuvre dans Firefox MutationObserver et en Chrome, comme préfixé fournisseur WebKitMutationObserver:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

Cet exemple est à l'écoute de DOM changements sur document et l'ensemble de son sous-arbre, et il sera le feu sur les modifications des attributs de l'élément ainsi que les changements structurels. Le projet de spec a une liste complète des mutation propriétés du port d'écoute:

childList

• Ensemble d' true si les mutations pour cible les enfants sont à observer.

attributs

• Ensemble d' true si les mutations de cibler les attributs sont à observer.

characterData

• Ensemble d' true si les mutations de données doivent être observés.

la sous-arborescence

• Ensemble d' true si les mutations non pas seulement de la cible, mais aussi de la cible descendants sont à observer.

attributeOldValue

• Ensemble d' true si attributes est définie sur true et cible valeur de l'attribut avant de la mutation doit être enregistré.

characterDataOldValue

• Ensemble d' true si characterData est définie sur true et données d'avant la mutation doit être enregistré.

attributeFilter

• Définit une liste de l'attribut nom (sans espace) si pas tous les attributs des mutations doivent être observées.

(Cette liste est mise à jour en avril 2014; vous pouvez vérifier les spécifications pour toute modification.)

Answer 2

Modifier

Cette réponse est maintenant obsolète. Voir la réponse par apsillers.

Depuis que c'est pour une extension Chrome, vous pourriez aussi bien utiliser la norme d'événements DOM - DOMSubtreeModified. Voir le support de cette manifestation dans les navigateurs. Il a été pris en charge dans Chrome depuis la 1.0.

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

Voir un exemple ici.

Answer 3

Une autre approche en fonction de comment vous la modification de la div. Si vous utilisez JQuery pour changer un div de contenu avec son format html() la méthode, vous pouvez étendre la méthode et de l'appeler une fonction d'enregistrement à chaque fois que vous mettez html dans un div.

(function( $, oldHtmlMethod ){
    // Override the core html method in the jQuery object.
    $.fn.html = function(){
        // Execute the original HTML method using the
        // augmented arguments collection.

        var results = oldHtmlMethod.apply( this, arguments );
        com.invisibility.elements.findAndRegisterElements(this);
        return results;

    };
})( jQuery, jQuery.fn.html );

Nous venons d'intercepter les appels au format html(), appelez une fonction d'enregistrement avec ce qui, dans le contexte fait référence à l'élément cible obtention d'un nouveau contenu, puis nous passons sur l'appel à l'original jquery.html() la fonction. N'oubliez pas de retourner les résultats de l'original html() la méthode, parce que JQuery n'attend que ça pour le chaînage de méthode.

Pour plus d'info sur la redéfinition de méthode et d'extension, découvrez http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm, qui est l'endroit où j'ai chipé la fonction de clôture. Découvrez également les plugins tutoriel JQuery site.