Utilisation de l'événement de mutation DOMSubtreeModified.dans jQuery

Question

J'ai utilisé le code jQuery suivant sur ma page et tout fonctionne bien sur Chrome. Mais lorsque j'ouvre la page correspondante dans Firefox, j'obtiens l'erreur de script qui ne répond pas.

Je sais que selon la spécification DOM3, les événements de mutation sont obsolètes.Mais quand même, si quelqu'un pouvait m'aider ici, je serai obligé.

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

            });
 });

Le HTML respectif est :

<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

On dirait que dans Firefox, l'appel à .slideToggle() déclenche le DOMSubtreeModified événement, alors que cela ne se produit pas dans Chrome.Donc, fondamentalement, dans Firefox, quelque chose déclenche initialement l'événement qui lie votre gestionnaire de clics.Tout va bien à ce stade.Lorsque vous cliquez ensuite, le slideToggle se passe comme prévu.Cependant, cela déclenche l'événement DOMSubtreeModified et vous vous retrouvez alors avec deux gestionnaires d'événements de clic faisant tous deux slideToggle parce qu'ils étaient désormais enregistrés deux fois.La prochaine fois que vous cliquerez, la boucle infinie se produira.Fondamentalement, les événements de clics multiples continuent de se déclencher DOMSubtreeModified qui enregistre plus de gestionnaires de clics, ce qui en fait plus slideToggles se produit, ce qui déclenche davantage DOMSubtreeModifieds, et ainsi de suite.Pour résoudre ce problème, vous pouvez utiliser jQuery .one qui indique à votre page de ne déclencher que cela DOMSubtreeModified handler une fois, ce qui empêche cette boucle.Si ce n'est pas une solution appropriée, il vous suffira de trouver un autre moyen pour vous assurer que le .click les gestionnaires ne sont pas liés plus d’une fois.

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

Regarde ça JSFiddle - il utilise .one mais j'ai pu vérifier que lors de l'utilisation de .on, le problème se produisait dans Firefox et non dans Chrome.

Answer 2

Eh bien, cela pourrait ne pas être une réponse appropriée ici puisque la question était sur la question de mutation-événements , et celui indiqué ci-dessous utilise mutationObserver mais je le pose toujours comme certains peuvent trouver celautile.

Ceci est l'alternative que j'ai utilisée pour Domsubtréified événement au cas où certains nœuds sont ajoutés dans le 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();