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

我已经彻底搜索了类似的问题，我能找到的最好的是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();
});

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

3 个答案: