同位素不能與阿賈克斯加載的內容

Question

我有一個選擇框，其中包含4個選項，選擇其中每個將導致刪除所有目前.item divs和加載新.items，然後使用同位素重新排列它們。

$('.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'); 
      } 
}); 

的loadContent功能如下：

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

出於某種原因，reLayout不工作。類別isotope-item不會被添加到單個項目中。在控制檯日誌中沒有錯誤。

Answer 1

我通過銷燬先前的同位素併爲選擇框中的每個值觸發一個新的同位素來解決此問題。我loadContent函數現在看起來是這樣的：

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