2009-12-25 11 views
28

Tengo una devolución de llamada ajax que inyecta marcado HTML en un div de pie de página.jQuery reloj para cambios en el domo?

Lo que no puedo entender es cómo crear una forma de controlar el div para cuando su contenido cambie. Colocar la lógica de diseño que intento crear en la devolución de llamada no es una opción ya que cada método (devolución de llamada y mi manejador div de disposición) no deberían conocer el otro.

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

encontré un plugin llamado reloj y una versión mejorada de ese plugin, pero nunca pude conseguir, ya sea para disparar. Traté de "ver" todo lo que podía pensar (es decir, la propiedad de altura del div se cambiaba a través de la inyección de ajax) pero no pude hacer que hicieran nada en absoluto.

¿Alguna idea/ayuda? Gracias jas

+0

¿Qué método está usando para inyectar el contenido? – outis

+0

en este caso estoy usando el complemento jQuery Layout. En el panel oeste tengo un div de contenido y div de pie de página. El diseño se inicializa antes de la llamada ajax, por lo que el panel de contenido del panel ocupa el 100% de la altura del panel. Mi devolución de llamada de éxito, si existen más filas que la sala, sabe cómo crear un localizador de paginación en la división del pie de página mediante su id ... var success = function (data) {$ (divid) .paginate (options); ...}. Pero no sabe que está en un objeto de diseño. Necesito activar layout.resizeContent ("west"); de alguna manera, pero no desea conectar la lógica de diseño de jQuery UI en la devolución de llamada. – jas

Respuesta

29

La manera más eficaz que he encontrado es vincularse al evento DOMSubtreeModified. Funciona bien con jQuery's $.html() y mediante la propiedad estándar de JavaScript innerHTML.

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

http://jsfiddle.net/hnCxK/

cuando se llama desde jQuery de $.html(), encontré se activa el evento dos veces: una vez para borrar los contenidos existentes y una vez para configurarlo. Un rápido .length -check funcionará en implementaciones simples.

También es importante tener en cuenta que el evento será siempre cuando se establece en una cadena HTML (es decir, '<p>Hello, world</p>'). Y que el evento solo disparará cuando se cambie por cadenas de texto sin formato.

+3

Es probable que valga la pena señalar que 'DOMSubtreeModified' está técnicamente obsoleto. Parece que DOM4 proporcionará una alternativa viable, algún día. Ver: http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 –

3

Es posible que desee examinar el evento DOMNodeInserted para Firefox/Opera/Safari y el evento onpropertychange para IE. Probablemente no sería demasiado difícil utilizar estos eventos, pero podría ser un poco hack-ish. Aquí hay alguna documentación del evento javascript: http://help.dottoro.com/larrqqck.php

6

Puede escuchar los cambios a los elementos DOM (su div por ejemplo) uniéndose a DOMCharacterDataModified probado en cromo pero no funciona en IE ver un demo here
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 's respuesta a jquery listen to changes within a div and act accordingly 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'); 

ver esto como una working demo here

3

Hay una biblioteca de JavaScript ordenada, mutation-summary de google, que le permite observar los cambios de dom de forma concisa.Lo bueno de esto es que, si lo desea, puede estar informado solo de las acciones que realmente marcaron la diferencia en el DOM, para comprender lo que quiero decir debe ver el video muy informativo en la página principal del proyecto.

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

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

Cuestiones relacionadas