Usando el evento de mutación DOMSubtreeModified.en jQuery

Question

He utilizado el siguiente código jQuery en mi página y todo funciona bien en Chrome, pero cuando abro la página respectiva en Firefox aparece el error de secuencia de comandos que no responde.

Sé que, según la especificación DOM3, los eventos de mutación han quedado obsoletos.Pero aún así, si alguien pudiera ayudarme aquí, se lo agradecería.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

El HTML respectivo es:

<div class="btn-slide" id="term">
    <div class="click-slide">
      <button>Search Terms </button>
    </div>
    <div class="btn-box">
       <label><span>Novena</span></label>
    </div>
</div>

Answer 1

Parece que en Firefox, la llamada a .slideToggle() está desencadenando el DOMSubtreeModified evento, mientras que esto no sucede en Chrome.Básicamente, en Firefox, algo activa inicialmente el evento que vincula su controlador de clic.Todo está bien en este momento.Cuando proceda a hacer clic, el slideToggle sucede como se esperaba.Sin embargo, eso activa el evento DOMSubtreeModified y luego terminas con controladores de eventos de dos clics, ambos haciendo slideToggle porque ahora estaban registrados dos veces.La próxima vez que hagas clic es cuando ocurre el bucle infinito.Básicamente, los eventos de clics múltiples se siguen activando. DOMSubtreeModified que registra más controladores de clics, lo que genera más slideToggles sucede lo que desencadena más DOMSubtreeModifieds, y así sucesivamente.Para solucionar este problema, puedes usar jQuery. .one que le dice a tu página que solo active eso DOMSubtreeModified controlador una vez, lo que evita este bucle.Si esa no es una solución adecuada, simplemente tendrá que encontrar otra forma de asegurarse de que .click Los manejadores no son atados más de una vez.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

Mira esto JSFiddle - está usando .one pero pude verificar que al usar .on, el problema ocurrió en Firefox y no en Chrome.

Answer 2

Bueno, esta podría no ser una respuesta adecuada aquí, ya que la pregunta era sobre mutación-eventos , y el que se publica a continuación está usando mutationobserver pero sigo publicando esto como algunos pueden encontrar estoÚtil.

Esta es la alternativa que utilicé para DomsUn Event en caso de que se agreguen algunos nodos en el DOM .

var target = $( "#term" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
       var newNodes = mutation.addedNodes; // DOM NodeList
       if( newNodes !== null ) { // If there are new nodes added

        //alert('something has been changed');

      }
   });    
});

// 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);
// Later, you can stop observing
// observer.disconnect();