Evento jQuery: detecta cambios en el html / texto de un div

Tengo un div que tiene su contenido cambiando todo el tiempo, ya sea ajax requests, jquery functions, bluretc, etc.

¿Hay alguna manera de detectar cualquier cambio en mi div en cualquier momento?

No quiero usar ningún intervalo o valor predeterminado marcado.

Algo como esto haría

$('mydiv').contentchanged() {
 alert('changed')
}

Si no desea usar el temporizador y verificar innerHTML, puede probar este evento

$('mydiv').bind('DOMSubtreeModified', function(){
  console.log('changed');
});

Más detalles y datos de soporte del navegador están aquí .

Atención: en las versiones más nuevas de jQuery, bind () está en desuso, por lo que debe usar on () en su lugar:

$('body').on('DOMSubtreeModified', 'mydiv', function(){
  console.log('changed');
});

Usando Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);

Como $("#selector").bind()está en desuso , debe usar:

$("body").on('DOMSubtreeModified', "#selector", function() {
    // code here
});

Puedes probar esto

$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

pero esto podría no funcionar en Internet Explorer, no lo he probado

Estás buscando MutationObserver o Mutation Events . Tampoco son compatibles en todas partes ni son vistos con demasiado cariño por el mundo desarrollador.

Si sabe (y puede asegurarse de que) el tamaño del div cambiará, es posible que pueda usar el evento de cambio de tamaño de crossbrowser .

El siguiente código funciona para mí.

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

Espero que ayude a alguien :)

No hay una solución incorporada a este problema, este es un problema con su diseño y patrón de codificación.

Puede usar el patrón editor / suscriptor. Para esto, puede usar eventos personalizados jQuery o su propio mecanismo de eventos.

Primero,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

Ahora puede suscribirse divhtmlchanging / divhtmlchanged events de la siguiente manera,

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

Ahora, tienes que cambiar tus cambios de contenido div a través de esto changeHtml() función. Por lo tanto, puede supervisar o hacer los cambios necesarios en consecuencia porque enlaza el argumento de datos de devolución de llamada que contiene la información.

Tienes que cambiar el html de tu div de esta manera;

changeHtml('#mydiv', '<p>test content</p>');

Y también, puede usar esto para cualquier elemento html excepto el elemento de entrada. De todos modos, puede modificar esto para usarlo con cualquier elemento (s).

Use MutationObserver como se ve en este fragmento proporcionado por Mozilla y adaptado de esta publicación de blog

Alternativamente, puede usar el ejemplo de JQuery que se ve en este enlace

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Puede almacenar el antiguo innerHTML del div en una variable. Establezca un intervalo para verificar si el contenido anterior coincide con el contenido actual. Cuando esto no sea cierto, haz algo.

Prueba el MutationObserver:

• https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

soporte del navegador: http://caniuse.com/#feat=mutationobserver

<html>
  <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>

Agregar algún contenido a un div, ya sea a través de jQuery o mediante DOM-API directamente, el valor predeterminado es la .appendChild()función. Lo que puede hacer es anular la .appendChild()función del objeto actual e implementar un observador en él. Ahora que .appendChild()hemos anulado nuestra función, necesitamos tomar prestada esa función de otro objeto para poder agregar el contenido. Por lo tanto, llamamos al .appendChild()de otro div para finalmente agregar el contenido. Por supuesto, esto también cuenta para el .removeChild().

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

Aquí puedes encontrar un ejemplo ingenuo. Puede extenderlo usted mismo, supongo. http://jsfiddle.net/RKLmA/31/

Por cierto: esto muestra que JavaScript cumple con el principio OpenClosed. :)