Reapply Isotope JQuery

Question

Я добавляю элементы сетки в DOM с помощью вызова ajax и хочу повторно использовать изотоп после готовности DOM. Кто-нибудь подскажет?

Пример кода:

$('#getNewData').on('click',function()){ 
    $.ajax({ 
     type: 'GET', 
     url: myUrl, 
     dataType: 'json', 
     success: function(data){ 
      $('#gridContainer').empty(); 

      $.each(data, function(){ 
       var gridContent = '<div class="grid-item filter1 filter2 filter3">'+ 
              '<h3 class="name">' + this.name + '</h3>' + 
              '<div class="grid-item-content"> + this.vale + '</div>'+ 
            '</div>'; 
       $('#gridContainer').append(gridContent); 
      }); 
     } 
     }); 

    var $grid = $('.grid').isotope({ 
     itemSelector: '.grid-item', 
     masonry: { 
      columnWidth: 160 
     } 
    }); 

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

}); 

Answer 1

Согласно docs, вы можете использовать $grid.isotope('reloadItems'). У меня возникла проблема, когда этот сброшенный стиль, но только для новых предметов, поэтому каждый раз, когда элементы были добавлены с помощью ajax, они были помещены поверх старых. Перезаряжаемый с $grid.isotope(); исправил это и красиво повторно применил стиль для всех предметов.