在ajax之后,bootstrap中的工具提示不起作用

Question

我有一个名为index.php的文件,其中包含另一个名为file1.php的文件(在index.php中我包含了jQuery,js等所有必需的文件).在file1.php中,我有一个带按钮的表,每个按钮都打开一个模态.模态中的信息来自file2.php的ajax调用.在file2.php中我创建了一个表.在表中我有单元格:

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

而且,工具提示不起作用.但是,当我复制它并将其传递给file1.php时,表格下方,工具提示确实有效.

任何人都可以帮我修复工具提示吗？谢谢.

Answer 1

我认为您需要初始化新到达的数据的工具提示,例如

$('[data-toggle="tooltip"]').tooltip();

在DOM操作之后,将此代码放置到AJAX成功处理程序中.

Answer 2

在像body这样的存在元素上使用选择器

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

Answer 3

您必须将工具提示初始化放入 Ajax 回调函数中：

$.ajax({
    method: "POST",
    url: "some.php"
}).done(function( msg ) {
    $('[data-toggle="tooltip"]').tooltip();
});

-或者-

您可以使用 ajaxComplete 事件全局实现它，而不是将初始化代码放入每个 Ajax 回调函数中：

/* initializate the tooltips after ajax requests, if not already done */    
$( document ).ajaxComplete(function( event, request, settings ) {
    $('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
});

此代码将为定义了 data-toggle="tooltip" 属性但没有属性“data-original-title”（即工具提示未初始化）的每个节点初始化工具提示。