javascript - Bootstrap Carousel内部未触发Tablesaw

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

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

加载后，轮播 Activity 项目上的表格将正确显示(Tablesaw已正确启动)，但是一旦我移至下一个幻灯片/项目，其中的表格将无法正确显示(Tablesaw未启动)。

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

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

这似乎适用于第一个幻灯片/项目，但不适用于其余幻灯片/项目。

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

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

最佳答案

问题出在 Tablesaw 初始化中。 Tablesaw需要在初始化期间(通过tablesaw-init.js完成)知道元素的大小。您在引导旋转木马中放置了两个台锯元素，其中一个处于 Activity 状态，另一个处于非 Activity 状态。当您查看Carousel css时，可以看到当前未激活的Carousel项目的display属性设置为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