加载 Ajax 时，Bootstrap 弹出框不工作
Posted
技术标签:
【中文标题】加载 Ajax 时，Bootstrap 弹出框不工作【英文标题】：Bootstrap Popover Not Working When Loaded With Ajax 【发布时间】：2014-04-12 04:57:18 【问题描述】：当我使用 ajax 加载 Bootstrap 弹出框内容时，弹出框未显示。
var id = 1;
$.post("load.php?pageid",
pageid:id;
,
function(data,status)
document.getElementById("body").innerhtml=data;
);
HTML 响应：
<a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
<script>
$(function ()
$("#example").popover();
);
</script>
当我将上面的 HTML 响应直接放在 <body id="body"></body> 代码中时，弹出框工作正常。我不明白这里出了什么问题。
【问题讨论】：
【参考方案1】：在jQuery的帮助下你可以初始化所有需要使用初始化的东西
$(document).ajaxSuccess(function ()
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
);
灵感来自Olaf Dietsche答案
【讨论】：
【参考方案2】：<script>$(function () $('[data-toggle="tooltip"]').tooltip());</script>
在您使用 ajax 加载的任何内容的末尾添加它。您应该已经在某个地方选择加入工具提示，但再次放置它以重新初始化工具提示。
【讨论】：
最佳答案，因为这与 id 或类名无关。 ?【参考方案3】：问题是您在函数 $() 中设置了弹出框。而不是
$(function ()
$("#example").popover();
);
应该只是
$("#example").popover();
或许更好
$(document).ajaxComplete(function()
$("#example").popover();
);
原因是 $() 中的任何函数都在文档首次完成加载时运行，此时“文档就绪”事件被触发。当该代码粘贴到原始 HTML 中时，它可以工作，因为它在文档完成加载时就存在。
当它是来自 AJAX 调用的响应时，它不会在 $() 中运行，因为“文档就绪”事件已经在一段时间前触发了。
【讨论】：
以上是关于加载 Ajax 时，Bootstrap 弹出框不工作的主要内容，如果未能解决你的问题，请参考以下文章
使用 Ajax 获取 Bootstrap 弹出框内容的最佳方法是啥？
bootstrap popover：使用 ajax 重新加载内容
iOS UITesting 如何关闭弹出框（iPad 弹出框不提醒样式）