DOMNodeInsertedのjQueryと無限ループの原因となるhtml（）

Question

私たちが使用するサードパーティのプラグインを修正するために、正しくないラベルにカスタムjQueryソリューションを構築すると、更新が必要になるため、プラグインのPHPコードを編集したくありません一度更新すれば私たちの編集内容は明らかに消えてしまいます。

「マイ・フレンド」とは「マイ・コネクション」に変更する必要があり、「グループ内のマイ・フレンド」を「グループ内のマイ・コネクション」に変更したいということです。

セレクタは、別のセレクタを使用するときにajax経由で挿入されるため、セレクタを挿入するたびにこの変更が必要になります。したがって、私は次のコード

私は（）関数のhtmlをコメントアウトした場合、コードは、私は、イベントがトリガされたことを知らせるために完全に罰金実行

jQuery(document).ready(function() { 
     jQuery('#wrapper').on('DOMNodeInserted', '#selector', function() { 
       //alert('Friends inserted!'); 
       var title1 = jQuery(this).children('.fa-friends'); 
       if(title1.length > 0) { 
         title1.html('My Connections'); 
       } 
       var title2 = jQuery(this).children('.fa-groupfriends'); 
       if(title2.length > 0) { 
         title2.html('My Connections in Group'); 
       } 
       alert(title1.html() + ' ' + title2.html());   
     }); // end on 
}); // end ready 

を書かれています。

私がhtml（）関数を開始しようとすると、コードは無限ループに詰まり、決して置き換えられません。

これは意図しない無限ループを引き起こすのはなぜですか？どのようにしてループを防止または停止できますか？

Answer 1

あなたはここでループを作成しました：

jQuery('#wrapper').on('DOMNodeInserted', '#selector', function() { 

をこれがDOMNodeInsertedが起こるいつのハンドラを追加しています。その後

一度メソッド内で、あなたがこれを行うとき、あなたはDOMNodeInsertedをトリガー：

title2.html('My Connections in Group'); 

HTMLを（）トリガが再びDOMNodeInserted、サイクルが継続している場合、新しいテキストを追加しています。

修正するには、最初にトリガーした後にリスナーを無効にする必要があります。

は、メソッド内にこれを追加します。

jQuery('#wrapper').off('DOMNodeInserted'); 

Answer 2

事がボトムでJavascriptのpropogateのイベント>アップ方式ということです。つまり、子に何かを挿入すると、子供のDOMNodeInsertedがトリガーされますが、親に伝えられて親のDOMNodeInsertedがトリガーされ、親の親より先にトリガーされるなど、親が存在しなくなるまで続きます。すべてのイベントはこのように動作します。

あなたは、古典的な問題を抱えているが、あなたはあなたの子ノードへのhtmlを挿入するときに伝播を防止する手段がない、ので、あなたはこれを行うことができます。

jQuery(document).ready(function() { 

    jQuery('#wrapper').on('DOMNodeInserted', '#selector', function(e) { 

     if ($(e.originalEvent.relatedNode).is($('#selector'))) { 
      //alert('Friends inserted!'); 
      var title1 = jQuery(this).children('.fa-friends'); 
      if(title1.length > 0) { 
        title1.html('My Connections in Group'); 
      } 
      var title2 = jQuery(this).children('.fa-groupfriends'); 
      if(title2.length > 0) { 
        title2.html('My Connections in Group'); 
      } 
      alert(title1.html() + ' ' + title2.html()); 
     } 

    }); // end on 

}); // end ready 

$(e.originalEvent.relatedNode).is($('#selector')) - 機能のみが動作することを保証します何かが直接挿入されたとき$('#selector')

Answer 3

実行時にクラスを追加し、そのクラスがあればon関数を起動しないように設定します。他のセレクターからもう一度呼び出されると、そのクラスはそこにはなく、再び呼び出されます。

jQuery(document).ready(function() { 
     jQuery('#activity-visibility').on('DOMNodeInserted', '#activity-privacy:not(.altered)', function() { 
       jQuery(this).addClass('altered'); 
       var title1 = jQuery(this).children('.fa-friends'); 
       if(title1.length > 0) { 
         title1.html('My Connections'); 
       } 
       var title2 = jQuery(this).children('.fa-groupfriends'); 
       if(title2.length > 0) { 
         title2.html('My Connections in Group'); 
       } 
     }); // end on 
}); // end ready