Tengo un div cuyo contenido puede cambiar de varias maneras: por ejemplo, todo su contenido puede volver a cargarse a través de HTML interno o los nodos pueden agregarse a través de métodos DOM. Esto, a su vez, puede suceder a través de Javascript nativo o indirectamente a través de llamadas a la API de jQuery oa través de otras bibliotecas.
Quiero ejecutar algún código cuando cambie el contenido del div, pero no tengo absolutamente ningún control sobre cómo cambiará. De hecho, estoy diseñando un widget que pueden usar otras personas, que son libres de cambiar el contenido de sus divs de la forma que prefieran. Cuando el contenido interno de este div cambia, es posible que también deba actualizarse la forma del widget.
Estoy usando jQuery. ¿Hay alguna manera de capturar el evento de que el contenido de este div ha cambiado, sin importar cómo sucedió?
Puede usar DOMNodeInserted y DOMNodeRemoved para verificar si se agregaron o eliminaron elementos. Desafortunadamente, IE no es compatible con esto.
$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) { if (event.type == 'DOMNodeInserted') { alert('Content added! Current content:' + '\n\n' + this.innerHTML); } else { alert('Content removed! Current content:' + '\n\n' + this.innerHTML); } }); Puede guardar los contenidos iniciales y los cambios futuros con .data() . Aquí hay un ejemplo.
var div_eTypes = [], div_changes = []; $(function() { $('#myDiv').each(function() { this['data-initialContents'] = this.innerHTML; }).bind('DOMNodeInserted DOMNodeRemoved', function(event) { div_eTypes.concat(e.type.match(/insert|remove/)); div_changes.concat(this.innerHTML); }); });Salida de ejemplo:
> $('#myDiv').data('initialContents'); "<h1>Hello, world!</h1><p>This is an example.</p>" > div_eTypes; ["insert", "insert", "remove"] > div_changes; ["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"] Es posible que desee incluir DOMSubtreeModified también, porque descubrí que DOMNodeInserted y DOMNodeRemoved no se activan si el HTML interno de un innerHTML se reemplaza directamente. Todavía no funciona en IE, pero al menos funciona bien en otros navegadores.
prueba algo como esto...
$('#divId').bind('DOMNodeInserted', function(event) { alert('inserted ' + event.target.nodeName + // new node ' in ' + event.relatedNode.nodeName); // parent }); IE no es compatible con esta propiedad, pero creo que lo más cercano a esto es el evento de cambio de propertychange , que se activa en respuesta a un cambio en un atributo o propiedad CSS de un elemento, pero no se activa en respuesta al cambio de HTML interno, que sería han estado cerca de lo que querías.
una solución factible más es anular la función de manipulación de jquery ...
Echa un vistazo a esta discusión. Forma preferida de modificar elementos que aún no se han creado (además de los eventos)
No existe tal evento (onChange) en javascript ni jQuery, tendría que crear un evento personalizado.
Una solución podría ser usar lowpro para adjuntar un comportamiento en este elemento que desea controlar, este comportamiento serializaría el elemento y luego crearía una encuesta que verifique cada x milisegundos para ver si el elemento ha cambiado, si cambia, active su evento personalizado sobre ese elemento.
Tienes algunos ejemplos de cómo usar lowpro con jQuery aquí: http://www.learningjquery.com/2008/05/using-low-pro-for-jquery
¡Buena suerte!