同位素不能与阿贾克斯加载的内容

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