javascript – 在Bootstrap Carousel中没有触发Tablesaw

我正在使用 Tablesaw plugin获取响应表.

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

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

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

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

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

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

我创建了一个Plunker to illustrate the issue.

解决方法

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

在此更改之后,无需处理滑动事件.

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