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

您需要重新定义工具提示。

如果某处有$(".tip").tooltip()之类的内容，则会在页面加载并在页面上注册class=tip工具提示时运行。因此，当您使用Ajax追加一些时，它们不会被.tooltip()注册。

可能的解决方案：使用Livequery - 它监视DOM更改并在附加元素上注册调用。

然后你会定义这样的工具提示：

$(".tip").livequery(function(){
     $(this).tooltip();
});

Answer 2

我假设您正在使用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
}
});

Answer 3

尝试将getLists.php文件放在与名为ajax的文件相同的目录中。

ajax加载内容中的工具提示

3 个答案: