同位素过滤器不会在'布局'上触发回调

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()添加类，但我想了解为什么回调没有触发。这似乎是做事的正确方法。

知道为什么回调没有解雇？

谢谢！

修改

我真的认为Boris的建议会奏效，但是当我这样做时，我看到了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

从文档中看，layout method看起来不期望任何参数。

但是有一个layoutComplete event，所以你可以试试这个：

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