javascript - Twitter Bootstrap Popovers 不适用于动态生成的内容

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 文件，然后获取响应文本并显示它。当我将这行代码添加到前面提到的 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>";

...果然，出现了“悬停弹出窗口”字样 - 但弹出窗口本身不起作用!

这已经让我发疯有一段时间了，如果有人能向我伸出援助之手，那就太好了!我还添加了用于启用下面 Bootstrap 弹出窗口的 JQuery 函数，这是值得的。

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

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

更新:

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

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'});
  });