Utilizzo dell'evento di mutazione DOMSubtreeModified.in jQuery

Question

Ho utilizzato il seguente codice jQuery sulla mia pagina e tutto funziona correttamente su Chrome. Ma quando apro la rispettiva pagina in Firefox ottengo l'errore di script che non risponde.

So che secondo le specifiche DOM3 gli eventi di mutazione sono stati deprecati.Ma comunque, se qualcuno potesse aiutarmi qui, gli sarei obbligato.

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

            });
 });

Il rispettivo 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

Sembra che in Firefox, la chiamata a .slideToggle() sta innescando il DOMSubtreeModified evento, mentre questo non accade in Chrome.Quindi, fondamentalmente in Firefox, qualcosa inizialmente attiva l'evento che vincola il tuo gestore di clic.Va tutto bene a questo punto.Quando poi procedi a fare clic, il file slideToggle avviene come previsto.Tuttavia, ciò attiva l'evento DOMSubtreeModified e ti ritroverai con due gestori di eventi clic che lo fanno entrambi slideToggle perché ora erano registrati due volte.La prossima volta che fai clic è quando si verifica il ciclo infinito.Fondamentalmente gli eventi di clic multipli continuano ad attivarsi DOMSubtreeModified che registra più gestori di clic che ne producono di più slideToggles accadere che innesca di più DOMSubtreeModifieds, e così via.Per risolvere questo problema, puoi utilizzare jQuery .one che dice alla tua pagina di attivarlo solo DOMSubtreeModified gestore una volta, il che impedisce questo ciclo.Se questa non è una soluzione adatta, dovrai solo trovare un altro modo per assicurarti che .click i conduttori non vengono vincolati più di una volta.

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

Controlla questo JSFiddle - sta usando .one ma ho potuto verificare che durante l'utilizzo di .on, il problema si verificava in Firefox e non in Chrome.

Answer 2

Beh, questa potrebbe non essere una risposta adatta qui poiché la domanda era di Mutation-Events , e quello pubblicato qui sotto sta utilizzando mutationobserver ma lo sto ancora pubblicando come alcuni potrebbero trovarloutile.

Questa è l'alternativa che ho usato per il DomsubTrowodified Event nel caso in cui alcuni nodi vengano aggiunti nel 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();

.