Isotope and Views Load More error - Javascript breaks on some Ajax calls

Question

I've created a view with Views Isotope and Views Load More contributed modules.

The objective is to have a Isitope grid that we can zoom in/out on items.

After long time to get it working I got a strange bug:

1. When I load the page it works fine.
2. When I click on load more first time the grid breaks.
3. When I click on load more second time the grid works fine.
4. When I click on load more third time the grid breaks.
5. And so on...

See it working here.

This is my 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);

Answer 1

I did noticed that after the 1st load more, you can't zoom in, then after the 2nd load more zoom works, and after the 3rd load more zoom doesn't work again.

I believe it's your code. You need to add the zoom in/out part again inside the 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);

Answer 2

It works fine for me. (your site) However if you want to prevent default behaviour you can indeed call e.preventDefault(); You just might want to try omitting the parameter.

new answer, now I understand the question better:

1) Drupal has an old version of jQuery by default with enough code that breaks. An easy solution without breaking modules that depend on the old version is adding a new version og jQuery with drupal_add_js() and then write

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

2) jQuery selectors don't work on elements that are generated (bij XHR /ajax for example) But if you use the .on (a delegate) it does work:

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

3) combining those:

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