包含 ajax 后如何初始化引导工具提示？
Posted
技术标签:
【中文标题】包含 ajax 后如何初始化引导工具提示？【英文标题】：How to initialize bootstraps tooltip after including with ajax? 【发布时间】：2016-05-07 03:51:23 【问题描述】：我正在使用 ajax 将内容 (html) 加载到我的网站。这包括，除其他外，这个 sn-p：
<a href="#" data-toggle="tooltip" title data-original-title="My tooltip text...">Hover me...</a>
如此处所述：bootstrap 3 > tooltip，我需要对其进行初始化。 ajax成功后如何初始化它？ 编辑：完整的工作示例。在这里，我模拟了一个“ajax 调用”。问题是持续时间。当您删除超时时，它会起作用：
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div id="html" style="margin-top: 50px;">
That works: <a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 1 text">Hover me 1...</a>
</div>
<div style="margin-top: 50px;">Ajax: <span id="ajax"></span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
// Document ready
$(document).ready(function ()
loadResult();
activateTooltip();
);
// Result
function loadResult()
// "Ajax call"
setTimeout(function()
var result = '<a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 2 text">Hover me 2...</a>';
$("#ajax").html(result);
, 2000); // Simulate Ajax duration
activateTooltip();
// Tooltip
function activateTooltip()
$('[data-toggle="tooltip"]').tooltip();
</script>
</body>
</html>【问题讨论】：
【参考方案1】：https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56
<a href="#" data-toggle="tooltip" data-original-title="Tooltip Right works fine" data-placement="right">Hover me...</a>
并在ajax成功时重新激活工具提示功能：
function loadResult()
$.ajax(
type: "POST",
url: "index.php?action=loadResult",
data: "id=1",
dataType: 'text',
success: function(data)
var json = $.parseJSON(data);
$("#result").html(json.result);
activateTooltip();
);
只需添加此属性：
data-placement="right"
【讨论】：
对不起，这不起作用。我想我也试过了。 当然可以，直接在 HTML 文档中。但不是，当您通过 ajax 调用包含剪辑时。 （您的示例中没有使用我的脚本。 能否提供#result的html sn-p
我无法在我的示例中复制 ajax 函数，但我使用了 setTimeout，它在那里工作正常
请看我的例子。造成问题的是持续时间。以上是关于包含 ajax 后如何初始化引导工具提示？的主要内容，如果未能解决你的问题，请参考以下文章