Escuche los cambios dentro de un DIV y actúe en consecuencia

Tengo una función que toma un documento XML y lo transforma según un documento XSL. A continuación, coloca el resultado en un div con la id laneconfigdisplay . Lo que quiero hacer es, separarme de la lógica de transformación, configurar un evento de cambio jQuery para ese div para que pueda ver cuándo ha cambiado y ejecutar algún código jQuery.

¡He intentado lo siguiente, pero no funciona!

 $(document).ready(function() { $('#laneconfigdisplay').change(function() { alert('woo'); }); //Do XML / XSL transformation here });  

¿Qué estoy haciendo mal?

Puede optar por crear sus propios eventos personalizados para que tenga una clara separación de la lógica.

Enlace a un evento personalizado:

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

En tu función que actualiza el div:

 // all logic for grabbing xml and updating the div here .. // and then send a message/event that we have updated the div $('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above 

El evento de change está limitado a input , textarea & y select .

Ver http://api.jquery.com/change/ para más información.

http://api.jquery.com/change/

el cambio solo funciona en los elementos del formulario de entrada.

solo podría activar una función después de su transformación XML / XSL o hacer un oyente:

 var html = $('#laneconfigdisplay').html() setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed... 

Si es posible, puede cambiar el div a un área de texto y usar .change ().

Otra solución podría ser utilizar un área de texto oculta y actualizar el área de texto al mismo tiempo que actualiza el div. Luego use .change () en el área de texto oculta.

También puede usar http://www.jacklmoore.com/autosize/ para hacer que el área de texto actúe más como un div.

   $("#hiddentextarea").change(function() { alert('Textarea changed'); }) 

Actualización: parece que textarea tiene que estar desenfocada una vez actualizada, para obtener más información: ¿Cómo configuro un oyente en jQuery / javascript para monitorear un si un valor en el cuadro de texto ha cambiado?

Aunque el evento DOMSubtreeModified está en desuso, funciona a partir de ahora, por lo que para cualquier proyecto improvisado lo puede usar de la siguiente manera.

 $("body").on('DOMSubtreeModified', "#mydiv", function() { alert('changed'); }); 

Sin embargo, a largo plazo, tendrás que usar la API MutationObserver .

Existe un excelente plugin jquery, LiveQuery , que hace justamente esto .

Live Query utiliza la potencia de los selectores de jQuery vinculando eventos o disparando devoluciones de llamadas para elementos coincidentes auto-mágicamente, incluso después de que la página se haya cargado y el DOM se haya actualizado.

Por ejemplo, podría usar el siguiente código para vincular un evento de clic a todas las tags A, incluso cualquier etiqueta A que pueda agregar a través de AJAX.

 $('a').livequery('click', function(event) { alert('clicked'); return false; }); 

Una vez que agregue nuevas tags A a su documento, Live Query enlazará el evento de clic y no hay nada más que necesite ser llamado o hecho.

Aquí hay un ejemplo de su magia …

enter image description here

Prueba esto

 $('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){ // your code; }); 

No uses esto Esto puede bloquear la página.

 $('mydiv').bind("DOMSubtreeModified",function(){ alert('changed'); });