DomSubTreeModified突然変異イベントを使用する。jquery.

Question

私のページに次のjQueryコードを使用しました。

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>

.

Answer 1

Firefoxのように見えますが、.slideToggle()への呼び出しはDOMSubtreeModifiedイベントを起動していますが、Chromeでは起こりません。そのため、基本的にFirefoxには、最初にクリックハンドラにバインドするイベントが発生します。この時点ですべてが得意です。クリックしてクリックを続行すると、slideToggleが期待どおりに発生します。ただし、DomSubTreeModifiedイベントから発生し、次に2つのクリックイベントハンドラを2回登録されているため、2回のクリックイベントハンドラで終了します。次回クリックすると、無限ループが発生したときです。基本的に複数のクリックイベントは、より多くのクリックハンドラを登録するslideToggleを起動します。これにより、より多くのDOMSubtreeModifiedなどが発生します。これを修正するために、JQUERYのslideTogglesを使用することができます。これは、このループを妨げるDOMSubtreeModifiedハンドラをその.oneハンドラのみから消灯させるように指示することができます。それが適切な解決策ではない場合は、DOMSubtreeModifiedハンドラが複数回バインドされていないことを確認するための他の方法で起きる必要があります。

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

.

この jsfiddle - .clickを使用していますが、使用時には、onを使用すると確認できました。問題はFirefoxで起こり、クロムではありませんでした。

Answer 2

井戸はここでは問題が変異イベントについてであったので、ここでは適切な答えではないかもしれません、そして以下に投稿されたものは mutationobserver ですが、まだ私はこれを見つけるかもしれません便利です。

これは、ドメインにいくつかのノードが追加されている場合に domsubtremodifiedイベントに使用した代替手段です。

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();

.