jquery – Isotope不能使用ajax加载的内容

我有一个包含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无效.类同位素项也没有被添加到单个项目中.这是控制台日志中没有错误.

解决方法

我通过破坏先前的同位素并为选择框中的每个值触发一个新同位素来解决这个问题.我的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'
                });
            });
        });
    }

原文地址：https://www.jb51.cc/jquery/177055.html