web-dev-qa-db-ja.com

アイソトープとビューがさらにエラーをロードする-一部のAjax呼び出しでJavaScriptが中断する

Views IsotopeとViews Loadを使用してビューを作成しました。

目的は、アイテムを拡大/縮小できるIsitopeグリッドを作成することです。

それを動作させるために長い時間の後、私は奇妙なバグを得ました：

  1. ページをロードすると、正常に動作します。
  2. 初めてグリッドが壊れたときに[ロード]をクリックすると、.
  3. さらにロードをクリックすると、グリッドは正常に機能します。
  4. さらに3回目のロードをクリックすると、グリッドが壊れます。
  5. 等々...

それが動作しているのを見てください ここ 。

これは私のjavascriptです：

(function ($) {
Drupal.behaviors.skeletonthemeCustomBehavior = {

attach: function (context, settings) {

  // $grid.isotope('destroy');

  var $grid = $('#isotope-container').isotope();

  $grid.isotope({
    masonry: {
      columnWidth: 10
    }
  });

$grid.on( 'click', '.isotope-element', function() {
  if ($( this ).hasClass( 'gigante' )) {
    $( this ).toggleClass('gigante');
  } else {
    // change size of item by toggling gigante class
    $( '.isotope-element' ).removeClass( 'gigante' );
    $( this ).toggleClass('gigante');
  }
  $grid.isotope('layout');
});

$('#destroy').bind( 'click' ,function(e) {
  event.preventDefault(e);
  $grid.isotope( 'destroy' );
});

  $('.relayout').bind( 'click' ,function(e) {
    event.preventDefault(e);
    var $grid = $('#isotope-container').isotope();
    $grid.isotope({
      masonry: {
        columnWidth: 10
      }
    });
    $grid.isotope('reloadItems');
  });

  $( document ).ajaxComplete(function() {
    var $grid = $('#isotope-container').isotope();
    $grid.isotope({
      masonry: {
        columnWidth: 10
      }
    });
    $grid.isotope('reloadItems');
  });
}

};
})(jQuery);
viewsjavascriptajax
1
MasterD

1回目以降の読み込み後はズームインできないことに気付きました。2回目の読み込み後はさらにズームが機能し、3回目の読み込み後はズームが再び機能しなくなります。

それはあなたのコードだと思います。ズームイン/アウト部分をもう一度追加する必要がありますajaxComplete function

(function ($) {
Drupal.behaviors.skeletonthemeCustomBehavior = {

attach: function (context, settings) {

  // $grid.isotope('destroy');

  var $grid = $('#isotope-container').isotope();

  $grid.isotope({
    masonry: {
      columnWidth: 10
    }
  });

$grid.on( 'click', '.isotope-element', function() {
  if ($( this ).hasClass( 'gigante' )) {
    $( this ).toggleClass('gigante');
  } else {
    // change size of item by toggling gigante class
    $( '.isotope-element' ).removeClass( 'gigante' );
    $( this ).toggleClass('gigante');
  }
  $grid.isotope('layout');
});

$('#destroy').bind( 'click' ,function(e) {
  event.preventDefault(e);
  $grid.isotope( 'destroy' );
});

  $('.relayout').bind( 'click' ,function(e) {
    event.preventDefault(e);
    var $grid = $('#isotope-container').isotope();
    $grid.isotope({
      masonry: {
        columnWidth: 10
      }
    });
    $grid.isotope('reloadItems');
  });

  $( document ).ajaxComplete(function() {
    var $grid = $('#isotope-container').isotope();
    $grid.isotope({
      masonry: {
        columnWidth: 10
      }
    });
    $grid.isotope('reloadItems');
    // adding the zoom in/out after ajax complete
       $grid.on( 'click', '.isotope-element', function() {
       if ($( this ).hasClass( 'gigante' )) {
       $( this ).toggleClass('gigante');
       } else {
       // change size of item by toggling gigante class
       $( '.isotope-element' ).removeClass( 'gigante' );
       $( this ).toggleClass('gigante');
       }
       $grid.isotope('layout');
       });
  });
}

};
})(jQuery);
2
No Sssweat

それは私にとってはうまくいきます。 （あなたのサイト）ただし、デフォルトの動作を防ぎたい場合は、実際にe.preventDefault();を呼び出すことができます。パラメータを省略してみてください。

新しい答え、今私は質問をよりよく理解します：

1）Drupalにはデフォルトで古いバージョンのjQueryがあり、十分なコードが壊れています。古いバージョンに依存するモジュールを壊さない簡単な解決策は、drupal_add_js()、次に書き込みます

var nQuery = $.noConflict(true); //or any name you want
nQuery('#divID').click();//and use it like the $

2）jQueryセレクターは、生成された要素（たとえば、bij XHR/ajax）では機能しませんが、.on（デリゲート）機能します。

$(document).on('click', '.relayout', function () {
    //show big pic
});

3）それらを組み合わせる：

 nQuery(document).on('click', '.relayout', function () {
        //show big pic
 });
1
Thomas