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

Question

在这里发布stackoverflow的新手,所以如果我搞砸了这里的任何东西,我提前道歉.

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

例如,如果我手动将它直接添加到我的HTML文档中,那么popover似乎有效:

<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>";

......当然,出现了"悬停于弹出窗口"的字样 - 但是弹出窗口本身不起作用!

这让我疯了一段时间,如果有人可以伸出援助之手,那将是不可思议的!我还添加了我正在使用的JQuery函数来启用下面的Bootstrap的popovers,这是值得的.

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

我已经彻底搜索了类似的问题,我能找到的最好的就是这个链接.但是这个链接似乎也没有任何解决方案.再次感谢!

更新:

固定!非常感谢所有帮助过的人.我的问题是在将元素添加到文档对象模型之前调用该函数.有多种可能的修复方法 - 我只是通过将popover函数转移到Ajax函数的END来测试解决方案,并且它有效!

Answer 1

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

UPDATE

如果你正在使用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'});
  });