Vẹt không được kích hoạt bên trong Bootstrap Carousel

Question

Tôi đang sử dụng Tablesaw plugin để nhận bảng đáp ứng.

Tại một thời điểm nào đó, tôi cần bao gồm các bảng khác nhau bên trong các mục/trang trình bày khác nhau của Bootstrap Carousel. Khi tải, bảng trên mục hoạt động của băng chuyền sẽ hiển thị chính xác (Tablesaw được khởi tạo đúng), nhưng khi tôi chuyển sang trang/mục tiếp theo, các bảng trong đó sẽ không được hiển thị đúng cách (Tablesaw not bắt đầu).

Tablesaw bao gồm một tập tin JS thêm để bắt đầu khi tải:

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

Điều này dường như làm việc cho các slide đầu tiên/item nhưng không cho phần còn lại.

Bất kỳ đầu mối nào về lý do điều này có thể xảy ra?

Tôi đã tạo một Plunker to illustrate the issue.

Answer 1

Sự cố xảy ra ở mục Tablesaw intialization. Tablesaw cần biết trong quá trình khởi tạo (được thực hiện trong tablesaw-init.js) kích thước của phần tử. Bạn có hai phần tử bảng được đặt bên trong Carousel bootstrap, trong khi một phần tử đang hoạt động và phần còn lại thì không. Khi bạn nhìn vào css Carousel, bạn có thể thấy rằng thuộc tính display của mục Carousel hiện không hoạt động được đặt thành none. Các phần tử không được hiển thị có width và height được đặt thành 0.

Vì vậy, các giải pháp có thể được thay đổi mã bên trong tập tin tablesaw-init.js này:

;(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); 

Sau sự thay đổi này có được không cần phải xử lý các sự kiện slid.

Đây là mẫu mã ban đầu của bạn với sự thay đổi đã đề cập, vì vậy bạn có thể thấy nó đang làm việc https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

Answer 2

Bạn không thể khởi tạo Tablesaw trên bảng ẩn.

Vì vậy, bạn phải thiết lập kịch bản khởi tạo tùy chỉnh của bạn để chỉ khởi tạo bảng có thể nhìn thấy:

;(function($) { 
    $(function(){ 
     // Initialize Tablesaw on the active carousel slide 
     $('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw'); 
     // Initialize Tablesaw on slide change 
     $('#carousel-einzelwerte').on('slid.bs.carousel', function(e) { 
      $(e.relatedTarget).trigger('enhance.tablesaw'); 
     }); 
    }); 
})(jQuery); 

Demo: https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview