jquery - 同位素不适用于 ajax 加载的内容

Question

我有一个包含 4 个选项的选择框，选择每个选项都会导致删除所有现有的 .item div 并加载新的 .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'
                });
            });
        });
    }