Detecta cambios de contenido de elementos con jQuery

change() funciona y detecta cambios en los elementos del formulario, pero ¿hay alguna forma de detectar cuándo se modificó el contenido de un elemento DOM?

Esto no funciona, a less que #content sea ​​un elemento de formulario

 $("#content").change( function(){ // do something }); 

Quiero que esto se dispare al hacer algo como:

 $("#content").html('something'); 

También la function html() o append() no tiene una callback.

¿Alguna sugerencia?

Estos son events de mutación .

No he utilizado las API de events de mutación en jQuery, pero una búsqueda superficial me llevó a este proyecto en GitHub. No estoy al tanto de la madurez del proyecto.

Sé que esta publicación tiene un año de antigüedad, pero me gustaría ofrecer un enfoque de solución diferente para quienes tienen un problema similar:

  1. El evento de cambio de jQuery se usa solo en los campos de input del usuario porque si se manipula algo más (por ejemplo, un div), esa manipulación proviene del código. Por lo tanto, encuentre dónde se produce la manipulación y luego agregue lo que necesite allí.

  2. Pero si eso no es posible por alguna razón (está usando un complemento complicado o no puede encontrar ninguna posibilidad de "callback"), entonces el enfoque de jQuery que sugeriría es:

    a. Para la manipulación simple de DOM, use jQuery encadenamiento y desplazamiento, $("#content").html('something').end().find(whatever)....

    segundo. Si desea hacer algo más, emplee el bind de jQuery con evento personalizado y triggerHandler

     $("#content").html('something').triggerHandler('customAction'); $('#content').unbind().bind('customAction', function(event, data) { //Custom-action }); 

Aquí hay un enlace al manejador de activadores jQuery: http://api.jquery.com/triggerHandler/

¿Qué tal http://jsbin.com/esepal/2

 $(document).bind("DOMSubtreeModified",function(){ console.log($('body').width() + ' x '+$('body').height()); }) 

Este evento ha quedado en desuso a favor de la API Mutation Observer

El browser no activará el evento onchange para los elementos <div> .

Creo que el razonamiento detrás de esto es que estos elementos no cambiarán a less que sean modificados por javascript. Si ya tiene que modificar el elemento usted mismo (en lugar de hacerlo el usuario), puede simplemente llamar al código correspondiente al mismo time que modifica el elemento, de esta manera:

  $("#content").html('something').each(function() { }); 

También podría activar manualmente un evento como este:

  $("#content").html('something').change(); 

Si ninguna de estas soluciones funciona para su situación, ¿podría dar más información sobre lo que específicamente está tratando de lograr?

Intente enlazar con el evento de DOMSubtreeModified y la testing también es parte del DOM.

vea esta publicación aquí en SO:

how-do-i-monitor-the-dom-for-changes

Prueba esto, fue creado por James Padolsey (JP aquí en SO) y hace exactamente lo que quieres (creo)

http://james.padolsey.com/javascript/monitoring-dom-properties/

Y con HTML5 tenemos nativos observadores de mutaciones DOM .

No es estrictamente una respuesta jQuery, pero es útil mencionarlo para la debugging.

En Firebug puedes hacer clic con el button derecho en un elemento en el tree DOM y configurar 'Romper el cambio de atributo':

Elemento, haga clic derecho en Firebug con Break on Attribute Change destacado

Cuando se cambia un atributo en un script, aparecerá la window de debugging y podrá rastrear lo que está sucediendo. También hay una opción para la inserción de elementos y la eliminación de elementos a continuación (no visiblemente oculta por la window emergente en la captura de pantalla).

Pruebe el plugin livequery. Eso parece funcionar para algo similar que estoy haciendo.

http://docs.jquery.com/Plugins/livequery

Estoy desarrollando una pequeña biblioteca JS llamada mutabor ( https://github.com/eskat0n/mutabor ) que pretende simplificar el uso de los events de mutación DOM. Ver demo.html para ejemplos.

A menudo, una manera simple y efectiva de lograr esto es hacer un seguimiento de cuándo y dónde está modificando el DOM.

Puedes hacer esto creando una function central que siempre es responsable de modificar el DOM. A continuación, realice la limpieza que necesite en el elemento modificado desde esta function.

En una aplicación reciente, no necesité una acción inmediata, así que utilicé una callback para la function handly load (), para agregar una class a cualquier elemento modificado y luego actualicé todos los elementos modificados cada pocos segundos con un timer setInterval.

 $($location).load("my URL", "", $location.addClass("dommodified")); 

Entonces puede manejarlo como quiera, por ejemplo

 setInterval("handlemodifiedstuff();", 3000); function handlemodifiedstuff() { $(".dommodified").each(function(){/* Do stuff with $(this) */}); } 

Puede agregar una opción de callback a la function html (o cualquier):

 $.fn.oldHtml = $.fn.html; $.fn.html = function(html,fn){ fn = fn || function(){}; var result = this.oldHtml(html); fn(); return result; }; $('body').html(11,function(){alert("haha");}); 

Demostración aquí.

Haces el cambio en algún elemento, no el elemento se ve obligado a cambiar por algo que tienes que atrapar.

Escribí un fragment que verificará el cambio de un elemento en un evento.

Entonces, si está utilizando un código de JavaScript de terceros o algo así y necesita saber cuándo algo aparece o cambia cuando ha hecho clic, entonces puede hacerlo.

Para el siguiente fragment, digamos que necesita saber cuándo cambia el contenido de una tabla después de hacer clic en un button.

 $('.button').live('click', function() { var tableHtml = $('#table > tbody').html(); var timeout = window.setInterval(function(){ if (tableHtml != $('#table > tbody'). console.log('no change'); } else { console.log('table changed!'); clearInterval(timeout); } }, 10); }); 

Pseudo Código:

  • Una vez que haces clic en un button
  • el html del elemento que está esperando cambiar es capturado
  • luego verificamos continuamente el html del elemento
  • cuando encontramos que html es diferente dejamos de verificar

Podemos lograr esto usando events de mutación . Según http://www.w3.org, el module de events de mutaciones está diseñado para permitir la notificación de cualquier cambio en la estructura de un documento, incluidas las modificaciones de text y de text. Para más detalles EVENTOS DE MUTACIÓN

Por ejemplo :

 $("body").on('DOMSubtreeModified', "#content", function() { alert('Content Modified'); // do something }); 

No es posible, creo que es decir, tiene un evento de cambio de contenido, pero ciertamente no es x-browser

¿Debo decir que no es posible sin un desagradable intervalo en el background?