Masonry overlaps when switching tab-panels

Question

I'm having problem with masonry overlaps when switching tab-panels.

On load window, on tab1 masonry active. when I press tab2, tab2 masonry active. But, problem occurs after this. When I click back tab1 again, items overlaps. And when I click back tab2 again, items overlaps.

On the first click on tabs. masonry works. But after clicking tabs which is already clicked. masonry does not work and items overlaps.

Below is my code.

<div class="tab-left">
  <ul class="nav-tabs">
    <li><a class="nav-link active" data-toggle="tab" href="#tab1">Tab1</a></li>
    <li><a class="nav-link" data-toggle="tab" href="#tab2">Tab2</a></li>
  </ul>
</div>

<div class="tab-content">
  <div id="tab1">
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </div>
</div>

<div class="tab-content">
  <div id="tab2">
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </div>
</div>

<script>
$(window).on('load', function(){
  $('.grid').masonry({
    itemSelector : '.grid-item',
    columnWidth: 330,
    horizontalOrder: true,
    fitWidth: true
  });
});

var masonryTabUpdate = function(){
  
  setTimeout(function(){
    $('.grid').masonry('reloadItems').masonry({
      trasitionDuration:'0.2s';
    });
  }, 400);
  jQuery.fn.ThisIsCalledWhenAjaxIsComplete = function(event){
     $('grid').masonry('layout');
  }
}

$(document).on('click', masonryTabUpdate);
$(document).ajaxComplete(masonryTabUpdate);

</script>

I tried imageUpload js. But still same problem.

Looked up most of stackoverflow which related to my problem. And tried most of them.

But still my problem does not solve..

can anyone help me solving this overlap problem?

Answer 1

I figured out. By putting js as

$('.tabs-left').tabs({
  activate:function(){
    //something you want
  }
});