jQuery observar los cambios DOMElement?

Question

Tengo una devolución de llamada Ajax que inyecta el formato HTML en un div pie de página.

Lo que no puedo entender es cómo crear una manera de controlar el div para cuando es cambiar el contenido. La colocación de la lógica de diseño que estoy tratando de crear en la devolución de llamada no es una opción, ya que cada método (devolución de llamada y mi diseño manejador div) no debe saber sobre el otro.

Lo ideal sería que me gustaría ver algún tipo de controlador de eventos similar a $('#myDiv').ContentsChanged(function() {...}) o $('#myDiv').TriggerWhenContentExists( function() {...})

He encontrado un plugin llamado reloj y una versión mejorada de ese plugin, pero nunca pude conseguir, ya sea para disparar. Probé "ver" todo lo que podía pensar (es decir, la propiedad altura de la div siendo cambiado a través de la inyección Ajax), pero no pudo llegar a hacer nada en absoluto.

Cualquier idea / ayuda?

Answer 1

La forma más efectiva que he encontrado es para unirse al evento DOMSubtreeModified. Funciona bien con $.html() de jQuery y tanto a través de la propiedad innerHTML estándar de JavaScript.

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

http://jsfiddle.net/hnCxK/

Cuando se llama desde $.html() de jQuery, encontré se activa el evento dos veces: una vez para borrar los contenidos existentes y una vez para configurarlo. Un .length-comprobación rápida funcionará en implementaciones sencillas.

También es importante tener en cuenta que el evento siempre fuego cuando establece en una cadena HTML (es decir '<p>Hello, world</p>'). Y que el evento sólo se fuego cuando cambia para las cadenas de texto sin formato.

Answer 2

Puede escuchar los cambios a los elementos DOM (el div por ejemplo) uniéndose a DOMCharacterDataModified probado en cromo pero no funciona en IE ver un demostración aquí
Al hacer clic en el botón provoca un cambio en el div que está siendo observado, que a su vez llena otra div para mostrar su trabajo ...

---

Tener un poco más de una mirada Shiki respuesta 's de < a href = "https://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly"> jQuery escuchar a los cambios dentro de un div y actuar en consecuencia parece que debería hacer lo que quiera:

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

En su función que actualiza el div:

$('#idOfDiv').trigger('contentchanged');

Vea esto como una demostración trabajar aquí

Answer 3

Hay una ordenada biblioteca de Javascript, mutación Resumen por Google, que le permite observar dom cambia de forma concisa. El bueno de esto, es que si se quiere, se le puede informar solamente de las medidas que realmente hicieron la diferencia en el DOM, para entender lo que quiero decir que usted debe ver el video muy informativo en la página web del proyecto.

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

envoltorio jQuery: https://github.com/joelpurra/jquery-mutation-summary

Answer 4

Es posible que desee ver en el evento DOMNodeInserted para Firefox / Opera / Safari y el evento onPropertyChange para IE. Es probable que no sería demasiado difícil de utilizar estos eventos, sino que podría ser un pequeño programa-ish. Aquí hay alguna documentación del evento javascript: http://help.dottoro.com/larrqqck.php