2009-11-17 4 views
0

Comment puis-je détecter les changements dans DOM comme innerHTML mis à jour etc à l'aide de livequery JQuery.livequery pour détecter les changements dom

J'ai essayé comme ci-dessous

Script -

var matched = function() { 
     alert('detected'); 
}; 
var unmatched = function() { 
    alert('removed') 
}; 

$('div#container').livequery(matched, unmatched) 

HTML -

<BODY onload="setTimeout(function(){ 
     document.getElementById('container').innerHTML = 'updated test'; },3000);"> 

    <div id="container">test</div> 
</BODY> 

Mais cela ne fonctionne pas.

Merci, Sourabh

+0

Y at-il erreur de script? Avez-vous inclus tous les fichiers js. – rahul

+0

On dirait que vous avez dit 'livequery' pour appeler vos fonctions quand un élément avec' id = "container" 'est lui-même ajouté ou retiré du DOM. Je ne pense pas que vous êtes censé l'appeler quand 'innerHTML' de cet élément est changé. –

+0

En fait, je m'attends à une alerte après 3 secondes (science innerHTML est mis à jour), mais je ne reçois pas. Même si je reçois une alerte sur le chargement de la page. – Sourabh

Répondre

2

Ce que vous essayez de faire est pas ce que le livequery-plugin est conçu pour faire.

$('div#container').livequery(matched, unmatched); 

Cela dit livequery à:

  • appel de la fonction correspond lorsqu'un div avec identifiant container se trouve ou ajouté au DOM avec l'une des méthodes de manipulation DOM jQuery
  • appel non appariés fonctionne quand un div avec l'ID container précédemment trouvé a été supprimé (ou id changé) du DOM avec l'une des méthodes de manipulation DOM de jQuery

Donc, avec votre échantillon, il ne déclenchera qu'une alerte indiquant détecté au chargement de la page. Comme la modification innerHTML n'ajoute ni ne supprime une div avec id container livequery est supposée ne rien faire et c'est ce qu'elle fait.


En utilisant * (au lieu de div#container) ne fera que tirer quelques alertes sur la charge de la page mais encore une fois ne se déclenche pas aussi longtemps que vous utilisez non jQuery méthodes DOM-manipulation.

document.getElementById('container').innerHTML = 'updated test'; 

ne se déclenche pas matched() que # 1 ne pas utiliser jQuery pour faire la manipulation; # 2 vous n'ajoutez pas un nouvel élément correspondant à *.

document.getElementById('container').innerHTML = '<p>updated test</p>' 

Ne pas tirer matched() que vous n'utilisez jQuery pour faire la manipulation (même si vous ajoutez un élément <p> qui serait compensée par le sélecteur * mais non enregistré par livequery comme il écoute seulement méthodes de manipulation DOM jQuery (et seulement une sélection d'entre eux aussi).

Si vous utilisez au lieu

$("#container").html('<p>updated test</p>'); 

Il se déclenche après matched() 3.Si vous ne faites

$("#container").html('updated test'); 

matched() ne se déclenche pas comme rien a été ajouté qui serait compensée par la sélection * seulement le innerHTML d'un élément déjà adapté a été changé

Questions connexes