jQuery regarder pour domElement changements?

J'ai un callback ajax qui injecte des balises html dans un pied de page div.

Ce que je ne peux pas comprendre comment créer un moyen pour surveiller la div pour ce qui est de la modification de contenu. En plaçant la logique de présentation, 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 div gestionnaire) ne devrait pas connaître les autres.

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

J'ai trouvé un plugin appelé regarder et une version améliorée de ce plugin, mais ne pourrait jamais obtenir soit pour déclencher. J'ai essayé de "regarder" tout ce que je pouvais penser (c'est à dire la hauteur de la propriété de la div être modifié via l'ajax d'injection), mais ne pouvait pas les amener à faire quoi que ce soit.

Toutes les pensées/de l'aide?

  • Quelle méthode utilisez-vous pour injecter le contenu?
  • dans ce cas, je suis en utilisant jQuery Mise en page du plugin. Dans l'ouest volet, j'ai un div du contenu et pied de page div. La mise en page est initialisée avant l'appel ajax de sorte que le panneau contenu du volet prend 100% de la fenêtre de la hauteur. Mon succès rappel, si plus de lignes que de la salle existe, sait créer une pagination pager dans le pied de page div via c'est id... la réussite var = function(data) { $(divid).paginate(options);... }. Mais il ne sait pas qu'elle est dans un objet de mise en page. J'ai besoin de déclencher la mise en page.resizeContent("ouest"); en quelque sorte, mais ne veulent pas de câblage, jQuery UI la logique de Présentation dans le rappel.
InformationsquelleAutor jas | 2009-12-25
  1. 43

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

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

    http://jsfiddle.net/hnCxK/

    Lorsqu'il est appelé à partir de jQuery $.html(), j'ai trouvé l'événement se déclenche deux fois: une fois pour effacer le contenu existant et une fois pour le régler. Un rapide .length-vérification du travail en implémentations simples.

    Il est également important de noter que l'événement aura toujours feu quand il est réglé à une chaîne HTML (ie '<p>Hello, world</p>'). Et que l'événement ne feu lorsqu'elles sont modifiées de la plaine-des chaînes de texte.

    • Il est sans doute intéressant de noter que DOMSubtreeModified est techniquement obsolète. Il ressemble à DOM4 permettra d'offrir une alternative viable, un jour. Voir: stackoverflow.com/questions/6659662/...
    InformationsquelleAutor Courtney Christensen
  2. 7

    Vous pouvez écouter pour que les modifications des éléments du DOM (votre div par exemple) par liaison sur DOMCharacterDataModified testé dans chrome, mais ne fonctionne pas dans IE voir un démo ici

    Cliquant sur le bouton provoque un changement dans la div qui est observé, ce qui à son tour remplit une autre div pour vous montrer son travail...

    D'avoir un peu plus d'un look Shiki's réponse à jquery écouter des changements à l'intérieur d'un div et d'agir en conséquence semble que ça 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 un travail démo ici

    InformationsquelleAutor Scoobler
  3. 4

    Il s'agit d'un pur bibliothèque javascript, mutation-résumé par google, qui vous permet d'observer dom changements de façon concise. La grande chose à ce sujet, est que si vous voulez, vous pouvez être informé uniquement des actions qui ont réellement fait une différence dans les DOM, à comprendre ce que je veux dire, vous devriez regarder le très instructif vidéo sur la page d'accueil du projet.

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

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

    InformationsquelleAutor Ricardo Freitas
  4. 3

    Vous voudrez peut-être regarder dans le DOMNodeInserted cas pour Firefox/Opera/Safari et la onpropertychange cas pour IE. Il ne serait probablement pas être trop difficile à utiliser ces événements, mais il peut être un peu hack-ish. Voici quelques événements javascript documentation: http://help.dottoro.com/larrqqck.php

    InformationsquelleAutor rynlbrwn