jQuery watch div

¿Hay alguna manera de mirar, si el contenido dentro de un div cambia?

Digamos que tengo:

Some content here

Que en algún punto 5 segundos después cambia a:

 
  • This is totally different!

¿Cómo puedo ser notificado de esto a través de una callback u otra cosa? En la mayoría de los casos, puedo obtener el javascript que está haciendo la inserción, para decirme. Pero quería saber si era posible.

El método jQuery .change () solo funciona para campos de formulario.

Escribí un pequeño complemento jQuery para ti:

      

Testing it: (click on divs to change contents)

Hi
Ho
He
He
He

Tenga en cuenta que esto solo observa los cambios en el contenido del elemento (html), no los atributos.

No existe un evento jQuery / DOM nativo que se active cuando cambie el contenido de HTML / DOM.

Podría (si se siente particularmente inútil) hacer algo como esto:

 $(function() { var $div = $("#hello"); var html = $div.html(); var checking = setInterval(function() { var newhtml = $div.html(); if (html != newhtml) { myCallback(); html = newhtml; } },100); function myCallback() { alert('content changed!'); // if you only want it to fire once, uncomment the following: // clearInterval(checking); } }); 

Solo recuerda que llamar a .html() cada 100 ms probablemente no sea la mejor idea para el rendimiento de tu sitio.

jsFiddle maqueta

Tal vez, es razonable controlar la fuente de los eventos que modifican el contenido de su (s) capa (s). Supongamos que un usuario ha hecho clic en cualquier lugar (leer, “hizo clic”) después de lo que el contenido puede haber cambiado. Por lo tanto, si marca el .html () después de un clic en lugar de usar un bucle, es posible que guarde algunos recursos del sistema.

¿Quién / qué cambiará esto? Si se trata de un JS que controlas, úsalo para activar tu callback. Obviamente, un usuario no puede cambiar esto.

Si desea ver un elemento , etc., use el evento ‘change’. Versión jQuery aquí: http://api.jquery.com/change/

Aquí hay un ejemplo de código que llama a una alerta simple cuando cambia el valor dado:

    watchu, watchu, watchu want, watchu want?   
Hello World!

Hay algunos eventos llamados DOMNodeInserted , DOMNodeRemoved y DOMSubtreeModified . ¿Qué control hay elementos agregados o eliminados o cualquier Html interno modificado dentro de un div? para esto necesita una función setInterval() .

  function DivChange() { $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { if (event.type == 'DOMNodeInserted') { alert('Content added'); } else if (event.type == 'DOMNodeRemoved') { alert('Content removed'); } else { alert('Inner Html changed for some content'); } }); } var DivTimer = setInterval(DivChange, 1000); 

Las funciones anteriores verificará la div para cualquier cambio de contenido, por cada segundo

Nota: IE no admite estos eventos