Twitter Bootstrap 弹出框不适用于动态生成的内容

Question

刚刚在 stackoverflow 上发帖，所以如果我在这里搞砸了任何事情，我提前道歉。

我正在使用 Twitter Bootstrap 的弹出框。我的弹出框似乎适用于我手动输入到我的 HTML 文档中的元素 - 但不是我通过 Javascript / Ajax 动态生成的元素。

例如，如果我手动将其直接添加到我的 HTML 文档中，弹出框似乎可以工作：

<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>

但我真正需要的是让我的动态生成的元素具有弹出框。我使用 XMLHttpRequest 向 PHP 文件发送请求，然后获取 responseText 并显示它。当我将这行代码添加到前面提到的 PHP 文件中时：

 echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";

... 果然，出现了“hover for popover”字样——但popover本身不起作用！

这已经让我发疯了一段时间，如果有人能帮我一把，那将是不可思议的！我还添加了我用来在下面启用 Bootstrap 弹出框的 JQuery 函数，这是值得的。

$(function (){
$("[rel=popover]").popover({placement:'left'});
}); 

我对类似问题进行了彻底的搜索，我能找到的最好的是this link。但是该链接似乎也没有任何解决方案。再次提前感谢！

更新：

已修复！非常感谢所有提供帮助的人。我的问题是在将元素添加到文档对象模型之前调用了该函数。有多种可能的修复方法 - 我只是通过将 popover 函数转移到 Ajax 函数的 END 来测试解决方案，它起作用了！

Answer 1

您需要在元素位于 DOM 之后调用 $("[rel=popover]").popover({placement:'left'});。

更新

如果你使用的是 jQuery

$(element_selector)
  // load results into HTML of element_selector
  .load('your/php/file')
  // when done, initialize popovers
  .done(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

或 jQuery ajax 请求包罗万象

$.ajaxComplete(function(){
    $("[rel=popover]").popover({placement:'left'});
  });

Answer 2

在ajax的成功函数中需要调用popover。像这样的

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}

Answer 3

此功能将在选择器中正常工作，您必须指定页面上您必须搜索“rel=popover”的位置，就像我放的 *

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});