Bootstrap 4 tooltips ngừng hoạt động sau khi jquery-pjax AJAX gọi

Question

Tôi mới sử dụng javascript và có thể sử dụng trợ giúp của bạn. Lần đầu tiên tải trang PJAX tôi, tooltips của tôi làm việc:

$(document).ready(function() { 
$(document).pjax('a', '#main', {cache: false}); 
$('[data-toggle="tooltip"]').tooltip(); 
} 

Họ bị kẹt trừ khi tôi làm như sau:

$(document).on('pjax:start', function(event) { 
$('[data-toggle="tooltip"]').tooltip('dispose'); 
}); 

Tôi đã cố gắng để khởi tạo lại chúng trên pjax: kết thúc hoặc pjax: hoàn thành không may mắn. Tôi nhận được một chú giải công cụ lạ mắt nếu tôi di chuột một thời gian dài, nhưng không phải là một chú giải công cụ khởi động.

Làm cách nào để cài đặt lại chú giải công cụ sau khi XHR hoàn tất?

Bootstrap v4.0.0-beta.2 https://v4-alpha.getbootstrap.com/components/tooltips/

https://github.com/defunkt/jquery-pjax

Answer 1

Tôi đang sử dụng khối tập lệnh bên ngoài vùng chứa pjax #main. Khi tôi di chuyển mã dưới đây để dưới cùng của khối kịch bản thấp nhất trở lại bên trong container, cuộc sống là tốt. Chú giải công cụ không bị kẹt khi tôi sử dụng phím tắt để thực hiện điều hướng AJAX hoặc khi tôi nhấp vào hộp kiểm công cụ. Chú giải công cụ là một chú giải công cụ khởi động khi tôi lần đầu tiên tải trang và khi tôi sử dụng AJAX để đến trang. (Tôi không chắc chắn liệu tôi có cần phải gọi tắt hay không).

$('[data-toggle="tooltip"]').tooltip(); 
$(document).off('pjax:start'); 
$(document).on('pjax:start', function(event) { 
    $('[data-toggle="tooltip"]').tooltip('dispose'); 
}); 

Answer 2

Liệu các công việc sau đây?

$(document).ready(function() { 
    $(document).on('pjax:success', 'a[data-pjax]', function(event) { 
    $('[data-toggle="tooltip"]').tooltip('dispose'); 
    $('[data-toggle="tooltip"]').tooltip();  
    }); 
    $(document).pjax('a', '#main', {cache: false}); 
});