Question

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

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

Answer 1

问题是你在函数$（）中设置了popover。而不是

$(function ()  
{ $("#example").popover();  
});

应该只是

$("#example").popover();

或许更好

$(document).ajaxComplete(function() {
  $("#example").popover();
});

原因是$（）内的任何函数都是在文档首次加载时运行，当“文档就绪”事件被触发时。当该代码粘贴在原始HTML中时，它可以正常工作，因为它在文档完成加载时存在。

当它是来自AJAX调用的响应时，它将不会在$（）内运行，因为“文档就绪”事件已经在前一段时间内被触发。

Answer 2

<script>$(function () {  $('[data-toggle="tooltip"]').tooltip()});</script>

在使用ajax加载的任何内容的末尾添加此内容。您应该已经在某个地方选择加入工具提示，但是再次将其重新初始化工具提示。

Answer 3

在jQuery的帮助下，您可以初始化需要使用

初始化的所有内容

$(document).ajaxSuccess(function () {
    $("[data-toggle=popover]").popover();
    $("[data-toggle=tooltip]").tooltip();
    // any other code
});

灵感来自Olaf Dietsche回答

使用Ajax加载时Bootstrap Popover不起作用

3 个答案: