web-dev-qa-db-ja.com

DOMSubtreeModifiedミューテーションイベントを使用します。 jQuery

私のページで次のjQueryコードを使用しましたが、すべてがchromeで正常に動作しますが、Firefoxでそれぞれのページを開くと、応答しないスクリプトエラーが発生します。

DOM3仕様に従って、ミューテーションイベントは廃止されました。しかし、もし誰かがここで私を手伝ってくれるなら、私は義務があります。

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

            });
 });

それぞれの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>
jqueryhtmlfirefoxmutation-events
11
jGupta

Firefoxでは、.slideToggle()の呼び出しがDOMSubtreeModifiedイベントをトリガーしているように見えますが、これはChromeでは発生していません。つまり、基本的にFirefoxでは、何かが最初にクリックハンドラーをバインドするイベントをトリガーします。この時点ですべてが良好です。次にクリックに進むと、slideToggleが期待どおりに発生します。ただし、それによってDOMSubtreeModifiedイベントが発生し、2回登録されたため、2つのクリックイベントハンドラーが両方ともslideToggleを実行することになります。次にクリックするのは、無限ループが発生したときです。基本的に、複数のクリックイベントはDOMSubtreeModifiedをトリガーし続けます。これにより、より多くのslideTogglesを発生させるより多くのDOMSubtreeModifiedを発生させるクリックハンドラーが登録されます。これを修正するには、jQueryの.oneを使用して、ページにそのDOMSubtreeModifiedハンドラーを1回だけ起動するように指示し、このループを防ぐことができます。それが適切な解決策でない場合は、.clickハンドラーが複数回バインドされないようにするために、他の方法を考え出す必要があります。

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

これをチェックしてください JSFiddle -.oneを使用していますが、.onを使用すると、ChromeではなくFirefoxで問題が発生することを確認できました。

16
p e p

質問はMutation-eventsに関するものであり、以下に投稿されたものはMutationObserver を使用しているため、これは適切な回答ではない可能性があります=しかし、これは便利だと思う人もいるので、まだ投稿しています。

これは、一部のノードがDOMに追加されている場合に備えてDOMSubtreeModifiedイベントに使用した代替案です。

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