Isotope and Views Load More error - Javascript breaks on some Ajax calls 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: 


When I load the page it works fine. 
When I click on load more first time the grid breaks.
When I click on load more second time the grid works fine.
When I click on load more third time the grid breaks.
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);
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);