Isotope Jquery erneut anwenden

Question

Ich füge die Rasterelemente mit einem Ajax-Aufruf in das DOM ein und möchte das Isotop erneut anwenden, sobald das DOM bereit ist. Irgendwelche Ahnung, irgendjemand?

Beispielcode:

$('#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

Nach dem docs können Sie $grid.isotope('reloadItems') verwenden. Ich hatte ein Problem mit diesem neugestalteten Styling, aber nur für neue Gegenstände. Jedes Mal, wenn Gegenstände mit AJAX hinzugefügt wurden, wurden sie auf die alten platziert. Ein Nachladen mit $grid.isotope(); reparierte dies und legte das Styling für alle Gegenstände wieder gut an.