jquery - 同位素不适用于 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'
                });
            });
        });
    }

Answer 2

如果您使用带有 Axios 的 Vue JS 将数据加载到同位素中，那么这里的问题是在构建 DOM 时数据不可用，这就是为什么在没有任何数据的情况下渲染同位素的原因。经过一番尝试，我找到了解决方法。

1. 确保在 jquery 之后加载 jquery-isotope，否则会抛出“$ 未定义”。
2. 确保仅在 ajax 调用成功后才调用 $('element').isotope({...})。

在下面的屏幕截图中，如果您检查 ajax 调用成功后正在加载的 custom.js，其中包含调用 $('element').isotope({...}) 的 initIsotope 方法。只有这一次数据在渲染同位素时可用，所以它工作正常！

无论如何，我希望这个答案对您有所帮助。