在Bootstrap Carousel中没有触发Tablesaw

Question

我正在使用Tablesaw插件来获取响应表.

在某些时候,我需要在Bootstrap Carousel的不同项目/幻灯片中包含不同的表格.

在加载时,Carousel的活动项目上的表格将正确显示(Tablesaw正确启动),但是一旦我移动到下一个幻灯片/项目,其中的表格将无法正确显示(Tablesaw未启动).

Tablesaw包含一个额外的JS文件,可在加载时启动:

$( function(){
    $( document ).trigger( "enhance.tablesaw" );
});

这似乎适用于第一张幻灯片/项目,但不适用于其余部分.

有关为什么会发生这种情况的任何线索？

我创建了一个Plunker来说明问题.

Answer 1

问题出在Tablesaw初始化中.Tablesaw需要在初始化期间(在其中完成tablesaw-init.js)知道元素的大小.你有两个tableaw元素放在bootstrap Carousel中,而一个是活动的而另一个不是.当您查看Carousel css时,您可以看到display当前未激活的Carousel项目的属性设置为none.未显示的元素具有width和height设置为0.

所以解决方案可能是将文件中的代码更改为tablesaw-init.js:

;(function($) {
    $(function(){
      // Show all carousel items before Tablesaw intialization
      $(".carousel-inner > .item").css("display", "block");
      // Initialize the Tablesaw
      $( document ).trigger( "enhance.tablesaw" );
      // Remove the style added before initialization
      $(".carousel-inner > .item").removeAttr("style");
    });
})(jQuery);

在此更改之后,无需处理该slid事件.

以下是您提到的更改的原始代码示例,因此您可以看到它正在运行https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview