web-dev-qa-db-ja.com

2つのajaxロード後にスクリプトが2回実行されるのを防ぐ

Colorboxオーバーレイ内にノードをロードするcolorboxノードを使用します。 colorboxの内部で、jqueryスクリプトをロードして、内部のすべてのリンクにいくつかのパラメーターを追加します。ただし、ロードは2つのajax呼び出しによって行われ、すべてのリンクでパラメーターが2倍になります。 .once（）を使用しようとしましたが、何も返されません。おそらく、最初のajax呼び出しの後に起動するためです。 2番目のajax呼び出しまで待つ方法は？ありがとうございました。

私のスクリプト：

(function($){ // Create local scope.
Drupal.behaviors.jjj = {
  attach: function (context, settings) {

$('#colorbox #block-book-navigation a', context).once('jjj', function () {
       $("#colorbox #block-book-navigation a").each(function(){

                       $(this).addClass("xxx");
console.log( "test" );               
       });

 });
}}; 
})(jQuery);
7ajaxjavascript
1
loparr

私はそれを考え出した。誤ったコードが.once関数の誤解から生じました。 「nav」は、セレクター#colorbox＃block-book-navigationがマークされるクラスを意味するため、そのセレクターでコードが複数回起動されることはありません。 http://codekarate.com/blog/drupal-7-prevent-duplicating-javascript-behaviors 正しいコードは次のようになります：

(function ($) {
  Drupal.behaviors.myCustomJS = {
    attach: function(context, settings) {
      $('#colorbox #block-book-navigation').once('nav', function() {

        $("#colorbox #block-book-navigation a").each(function(){         
            $(this).addClass("colorbox-node");

       });


      });
    }
  };
})(jQuery);
1
loparr

あなた自身の答えを改善するためのいくつかのこと...

セレクター「#colorbox＃block-book-navigation」に一致する2番目の要素が追加された場合、addClass（）は、すでに実行されているものを含む両方の要素のすべてのアンカータグで再度実行されます。

このコードはいくつかの問題を修正します：

(function ($) {
  Drupal.behaviors.myCustomJS = {
    attach: function(context, settings) {
      $('#colorbox #block-book-navigation', context).once('nav', function() {
        $("a", this).addClass("colorbox-node");
      });
    }
  };
})(jQuery);

メモ：

  • "$（ '＃colorbox＃block-book-navigation'、context）"the "、context" が追加されます。つまり、このセレクターは、現在のコンテキストでのみ検索されます。つまり、最初のページ読み込み時のドキュメント全体、またはAJAX on AJAX呼び出し。
  • 同様に "$（" a "、this）"the "、this"現在処理中の "#colorbox＃block-book-navigation"要素内のアンカータグのみが検出されるようにします。今は冗長なので、セレクターの前の部分を削除しました。
  • すべてのリンクに対して他のロジックを実行していない場合、 "。each（）"は冗長です。この例では削除しました。

このコードは、ロジックの不要な繰り返しを防ぐという点で、パフォーマンスが高く（jQueryによるDOMトラバーサルの実行が少ない）、より堅牢である必要があります。

1
Paul Querol

現在、他のソリューションでは、他のajax呼び出しで既存の#colorbox #block-book-navigation内にタグが挿入されていないと想定しています。

このソリューションはその場合にも機能し、他の目的でeachループを使用しない限り、他のソリューションよりも少し単純です。

Drupal.behaviors.jjj = {
  attach: function(context, settings) {
    $('#colorbox #block-book-navigation a', context).once('jjj').addClass('xxx');
  }
};
0
rooby

試して頂けますか？

(function($) { 
    // Create local scope.
    Drupal.behaviors.jjj = {
        attach: function (context, settings) {
            $('#colorbox #block-book-navigation', context).once('jjj', function () {
                $(this).find('a').addClass('xxx');
            });
        }
    }; 
}) (jQuery);
0
Nhat