2016-01-29 58 views
1

我正在使用同位素过滤器和引导选项卡在自己的选项卡内容区域之间切换两个同位素过滤器。同位素过滤器不会在'布局'上触发回调

因为选项卡隐藏/显示选项卡内容每次选项卡处于活动状态时,我必须调用同位素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'); 
      } 
     }); 
+0

你说的是[这种同位素(http://isotope.metafizzy.co/)? –

+0

是的,这是一个 – ministry

回答

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'); 
+0

感谢您的帮助,看我上面的编辑 – ministry

+0

@river_jones尝试使用'$ isotopeContainer.one('layoutComplete'...','one'而不是'on',可能多个回调以某种方式打破它。如果你设置demo plunker或者jsfiddle,它也会很棒,所以它会更容易检查。 –