我正在使用同位素过滤器和引导选项卡在自己的选项卡内容区域之间切换两个同位素过滤器。同位素过滤器不会在'布局'上触发回调
因为选项卡隐藏/显示选项卡内容每次选项卡处于活动状态时,我必须调用同位素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');
}
});
你说的是[这种同位素(http://isotope.metafizzy.co/)? –
是的,这是一个 – ministry