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

J'ai utilisé jQuery code sur ma page et tout fonctionne très bien sur chrome.Mais, quand j'ouvre la page correspondante dans firefox j'obtiens l'Erreur de Script ne répond pas.

Je sais que par DOM3 spécification de la mutation des événements ont été dépréciés. Mais Encore, si quelqu'un pouvait m'aider à sortir d'ici, je vais être obligé.

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

            });
 });

Respectifs HTML 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>

source d'informationauteur Amit Singh

  1. 14

    Il ressemble dans Firefox, l'appel à .slideToggle() est le déclenchement de la DOMSubtreeModified événement, alors que ce n'est pas le cas dans Chrome. Donc, fondamentalement, dans Firefox, quelque chose d'abord déclenche l'événement qui lie votre gestionnaire de clic. Tout est bon à ce point. Lorsque vous procédez au clic, la slideToggle se passe comme prévu. Cependant, qui déclenche la DOMSubtreeModified événement et que vous vous retrouvez avec deux gestionnaires d'événements click à la fois de faire slideToggle parce qu'ils étaient maintenant enregistrée deux fois. La prochaine fois que vous cliquez sur, c'est quand la boucle infinie se produit. Fondamentalement, les multiples événements de clic garder le déclenchement de DOMSubtreeModified qui enregistre plus de gestionnaires de clic ce qui rend plus slideToggles arriver ce qui déclenche le plus DOMSubtreeModifieds, et ainsi de suite et ainsi de suite. Pour résoudre ce problème, vous pouvez utiliser du jQuery .one qui indique à votre page de seulement incendie qui DOMSubtreeModified gestionnaire d'une fois, ce qui empêche cette boucle. Si ce n'est pas une solution adéquate, vous aurez juste besoin de trouver un autre moyen de assurez-vous que le .click gestionnaires ne se limite plus d'une fois.

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

    Découvrez ce JSFiddle - c'est à l'aide de .one mais j'ai pu le vérifier lors de l'utilisation .sur la, le problème qui s'est passé dans Firefox et pas de Chrome.

  2. 11

    Bien ce ne serait pas une réponse convenable ici, puisque la question était de savoir Mutation événementset celui affiché ci-dessous est à l'aide de Mutation Observateurs encore, mais je vais l'afficher comme certains peuvent trouver cela utile.

    C'est l'alternative que j'ai utilisé pour DOMSubtreeModified événement dans le cas où certains nœuds sont ajoutés dans les 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('some thing 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();