Usando DOMSubtreeModified mutação do evento.no jQuery

Question

Eu tenho usado o seguinte código jQuery na minha página e tudo funciona bem no google chrome.Mas quando eu abrir a respectiva página no firefox, eu começar a Responder de Erro de Script.

Eu sei como por DOM3 especificação de mutação eventos foram preteridos.Mas, Ainda assim, se alguém puder me ajudar aqui, eu vou ser obrigado.

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

            });
 });

Respectivos HTML é:

<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 no Firefox, a chamada para .slideToggle() está a accionar o DOMSubtreeModified o evento, enquanto isso não acontece no google Chrome.Então, basicamente, no Firefox, algo inicialmente dispara o evento que une a seu manipulador de clique.Tudo é bom neste momento.Quando você, em seguida, clique em vá para o slideToggle acontece como o esperado.No entanto, o que dispara o DOMSubtreeModified evento e, em seguida, acabar com duas clique em manipuladores de eventos, tanto a fazer slideToggle porque eles agora foram registradas duas vezes.A próxima vez que você clica é quando o loop infinito acontece.Basicamente, os vários eventos de clique manter trigger DOMSubtreeModified o que regista mais clique manipuladores que torna mais slideToggles aconteça o que dispara mais DOMSubtreeModifieds, e assim por diante e assim por diante.Para corrigir isso, você pode usar o jQuery .one o que diz a sua página para apenas fogo de fora que DOMSubtreeModified manipulador de uma vez, o que impede que este ciclo.Se isso não é uma solução adequada, você só precisa vir para cima com o de alguma outra forma para se certificar de que o .click manipuladores de não ficar vinculado por mais de uma vez.

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

Confira este JSFiddle - ele está usando .one mas eu era capaz de verificar que, quando a utilizar .em, o problema aconteceu no Firefox e não Chrome.

Answer 2

Bem, isso pode não ser uma resposta adequada aqui, pois a pergunta era sobre Mutação-eventos, e a postada abaixo está a utilizar MutationObserver mas ainda assim, eu estou postando como alguns podem encontrar este muito útil.

Esta é a alternativa que eu utilizados para DOMSubtreeModified evento, no caso de alguns de nós estão sendo adicionados no 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();