同位素过滤器不会对“布局”进行回调

Question

我使用同位素过滤器与引导选项卡相结合，在它们自己的选项卡内容div中的两个同位素过滤器之间切换。

由于选项卡隐藏/显示选项卡内容，所以每次选项卡活动时，我都必须调用同位素layout命令。在完成同位素布局命令之后，我想控制向同位素容器添加一个css类。

但是，当我从对同位素实例的匿名回调调用jQuery的addClass()时，它从不触发：

$('a[data-toggle=tab]').on('shown.bs.tab', function (e) {
    if ( $($(this).attr('href') + '[class*=isotope-container]') ) {
            $($(this).attr('href')).isotope('layout', function() {
                $($(this).attr('href')).addClass('trans-height');
                console.log("My callback fired");
            });
    }
}

我从未见过控制台日志，也没有将trans-height添加到同位素容器中。

我确保我的同位素容器div包含一个带有子字符串isotope-container的类，并且对同位素layout的调用工作正常:如果我删除了这个代码，那么当选项卡显示时，我的同位素就会聚集起来，但是当它被包含时就会很好地展开。

我意识到我可以使用一个相对安全的setTimeout()来添加类，但是我想了解为什么回调没有启动。这似乎是做事情的正确方法。

你知道为什么回调没有启动吗？

谢谢!

编辑

我真的认为鲍里斯的建议会奏效，但当我这么做的时候，我看到了shown.bs.tab的第一个警报，但第二个警告从未发生过：

$('a[data-toggle=tab]').on('shown.bs.tab', function () {
            if ( $($(this).attr('href') + '[class*=isotope-container]') ) {

                $isotopeContainer = $($(this).attr('href'));
                $isotopeContainer.on('layoutComplete', function() {
                    alert("Layout is complete");
                    $(this).addClass('trans-height');
                });

                alert("Tab containing isotope has been shown");
                $($(this).attr('href')).isotope('layout');
            }
        });

Answer 1

从文档来看，布局方法似乎不需要任何参数。

但是有一个layoutComplete事件，所以您可以尝试如下：

$('isotope-selector').on('layoutComplete', function() {
    $($(this).attr('href')).addClass('trans-height');
    console.log("My callback fired");
});
$('isotope-selector').isotope('layout');