无法通过 Ajax 加载引导工具提示答案

【问题标题】：Unable to load Bootstrap tooltip via Ajax无法通过 Ajax 加载引导工具提示
【发布时间】：2016-03-25 22:26:44
【问题描述】：

我正在尝试（通过 Ajax 调用）加载一个标题在 HTML 标记中的工具提示。在由include_once 函数加载的第一个页面加载中，工具提示工作正常，但当我使用 Ajax 调用触发页面加载时却不行。这是我的文件：

loadTable.php

    <?php
        $content = "<a data-toggle='tooltip' data-html='true' title='<strong>ok</strong>'
<span class='glyphicon glyphicon-align-left'></span></a>";

        echo $content;
    ?>

mypage.php

<button type="button" class="btn btn-primary" onclick="loadPage()">Load</button>
<div id="tableData">
    <?php include_once('loadTable.php');?>
</div>

myjavascriptfile.js

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
            }
        });
    }
}

注意：当然，我将示例简化到了极致，只是为了便于理解和简化。

【问题讨论】：

无法加载是什么意思？看起来您正在加载与以前相同的 HTML。
是的，它是一样的......但是通过 Ajax，工具提示不会触发 onmouseover the glyphicon。
您需要在动态加载的元素上重新初始化工具提示
知道怎么做吗？
对不起，自动更正，见编辑，你会想要像 $('.tooltip').tooltip();更新 html 后，我的语法不是 100%，我现在在手机上，但 IIRC 是正确的 ode，但您需要根据需要调整选择器以定位您的工具提示元素

标签： javascript php jquery ajax twitter-bootstrap-tooltip

【解决方案1】：

感谢DelightedD0D，解决办法是在Ajax Call之后重新初始化tooltips。

就我而言，我添加了这一行： $('[data-toggle="tooltip"]').tooltip();

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
                $('[data-toggle="tooltip"]').tooltip();
            }
        });
    }
}

希望对遇到同样问题的人有所帮助。

【讨论】：