Bootstrap 4 个工具提示在 jquery-pjax AJAX 调用后停止工作

Question

我是 javascript 的新手，需要您的帮助。第一次加载我的 PJAX 页面时，我的工具提示起作用了：

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

除非我执行以下操作，否则它们会卡住：

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

我曾尝试在 pjax:end 或 pjax:complete 上重新初始化它们，但没有成功。如果我长时间悬停，我会得到一个看起来很奇怪的工具提示，但不是 bootstrap 工具提示。

XHR 完成后如何重新安装工具提示？

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

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

Answer 1

以下是否有效？

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

Answer 2

我在 pjax 容器外使用脚本块 #main。当我将下面的代码移到容器内返回的最低脚本块的底部时，一切都很好。当我使用键盘快捷键进行 AJAX 导航或单击带有工具提示的复选框时，工具提示不会卡住。当我第一次加载页面和使用 AJAX 到达页面时，工具提示是 bootstrap 工具提示。（我不确定我是否需要调用 off() 但它不应该受到伤害。）

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

Bootstrap 4 个工具提示在 jquery-pjax AJAX 调用后停止工作

Bootstrap 4 tooltips stop working after jquery-pjax AJAX call

javascript

ajax

pjax

bootstrap-4