Isotope不能使用ajax加载的内容

Question

我有一个包含4个选项的选择框,选择每个选项将导致删除所有当前的.itemdiv并加载新的.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'
                });
            });
        });
    }