web-dev-qa-db-fra.com

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

J'ai utilisé le code jQuery suivant sur ma page et tout fonctionne bien sur Chrome, mais lorsque j'ouvre la page respective 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 ont été dépréciés. Mais si quelqu'un pouvait m'aider ici, je serais 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>
jqueryhtmlfirefoxmutation-events
11
jGupta

Il ressemble à Firefox, l'appel à .slideToggle() déclenche l'événement DOMSubtreeModified, 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 sur, le slideToggle se produit comme prévu. Cependant, cela déclenche l'événement DOMSubtreeModified et vous vous retrouvez ensuite avec deux gestionnaires d'événements de clic qui font tous les deux slideToggle car ils ont maintenant été enregistrés deux fois. La prochaine fois que vous cliquerez, la boucle infinie se produira. Fondamentalement, les événements de clics multiples continuent de déclencher DOMSubtreeModified qui enregistre plus de gestionnaires de clics, ce qui fait plus de slideToggles se produire, ce qui déclenche plus de DOMSubtreeModifieds, et ainsi de suite. Pour résoudre ce problème, vous pouvez utiliser .one De jQuery qui indique à votre page de ne déclencher ce gestionnaire DOMSubtreeModified qu'une seule fois, ce qui empêche cette boucle. Si ce n'est pas une solution appropriée, vous aurez juste besoin de trouver une autre façon de vous assurer que les gestionnaires .click Ne sont pas liés plus d'une fois.

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

Découvrez ceci JSFiddle - il utilise .one Mais j'ai pu vérifier qu'en utilisant .on, le problème est survenu dans Firefox et non dans Chrome.

16
p e p

Eh bien, cela pourrait ne pas être une réponse appropriée ici car la question portait sur les événements de mutation , et celui affiché ci-dessous utilise MutationObserver mais je le poste quand même car certains peuvent trouver cela utile.

C'est l'alternative que j'ai utilisée pour l'événement DOMSubtreeModified au cas où certains nœuds seraient 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();
16
jGupta