加载 Ajax 时，Bootstrap 弹出框不工作答案

【问题标题】：Bootstrap Popover Not Working When Loaded With Ajax加载 Ajax 时，Bootstrap 弹出框不工作
【发布时间】：2014-04-12 04:57:18
【问题描述】：

当我使用 ajax 加载 Bootstrap 弹出框内容时，弹出框未显示。

Javascript：

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> 代码中时，弹出框工作正常。我不明白这里出了什么问题。

【问题讨论】：

标签： javascript jquery html ajax twitter-bootstrap

【解决方案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 调用的响应时，它不会在 $() 中运行，因为“文档就绪”事件已经在一段时间前触发了。

【讨论】：