javascript - ajax 加载内容中的工具提示

Question

我有这个带工具提示的小进度条。

<div class="progress progress-mini tip" title="" data-original-title="70%">
    <div class="progress-bar" style="width:70%;"></div>
</div>

如果我将它直接放在页面中，它就可以工作。

但是当我用 ajax 得到它时:

$.ajax({
    type: "GET",
    url: "/ajax/getLists.php",
    datatype: "html",
    beforeSend: function() {
        $('#ajaxspinner').show();
    },
    success: function(data) {
        $('#ajaxspinner').hide();
        $('.container-fluid #heading').after(data);
    }
});

PHP 文件 (getLists.php):

<?php
echo '<div class="progress progress-mini tip" title="" data-original-title="70%"><div class="progress-bar" style="width:70%;"></div></div>';
?>

工具提示不显示。

(我是 jquery 的新手，我找不到解决方案)

Answer 1

我假设您正在使用 jquery 的工具提示插件。你按照演示并在准备好文档时对其进行了初始化，是吗？如果是这样，您应该在加载内容后初始化您的插件。像这样的东西:

$.ajax({
type: "GET",
url: "/ajax/getLists.php",
datatype: "html",
beforeSend: function() {
    $('#ajaxspinner').show();
},
success: function(data) {
    $('#ajaxspinner').hide();
    $('.container-fluid #heading').after(data);
    $.tooltipPluginInit('.tip'); // whatever
}
});