Isotope nicht mit Ajax geladenen Inhalt

Question

Ich habe eine Auswahl-Box, die 4 Optionen enthält, die Auswahl jeder von denen wird alle vorhandenen .item divs entfernen und neu laden .items und dann neu ausrichten sie mit Isotop.

$('.menu-select').change(function(){ 
    var selected=$('.menu-select-option:selected').html().toLowerCase(); 
     if(selected=='all') 
      { 
       loadContent('mixed_home_all.html'); 
      } 
     if(selected=='recommended') 
      { 
       loadContent('mixed_home_reco.html'); 
      } 
     if(selected=='popular') 
      { 
       loadContent('mixed_home_pop.html'); 
      } 
}); 

Die Loadcontent Funktion sieht wie folgt aus:

function loadContent(filename){ 
     var $item=$('.item'); 
     $container.isotope('remove', $item); 
     $container.load(filename, function(){ 
      $container.imagesLoaded(function(){ 
       $container.isotope('reLayout'); 
      }); 
     }); 
    } 

aus irgendeinem Grund ist reLayout nicht funktioniert. Die Klasse isotope-item wird auch nicht zu den einzelnen Elementen hinzugefügt. Es gibt keinen Fehler im Konsolenprotokoll.

Answer 1

Ich löste dies, indem ich vorheriges Isotop zerstörte und einen neuen für jeden Wert in der Auswahlbox auslöste. Meine loadContent Funktion wie folgt aussieht jetzt:

function loadContent(filename){ 
     var $item=$('.item'); 
     $container.isotope('destroy'); //destroying isotope 
     $container.load(filename, function(){ 
      $container.imagesLoaded(function(){ 
       $container.isotope({ //triggering isotope 
        itemSelector: '.item' 
       }); 
      }); 
     }); 
    }