20

在这里发布 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'});
});

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

更新：

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

4

3 回答 3

17

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

更新

如果你使用 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'});
  });
于 2012-08-14T06:51:15.547 回答
2

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

success:function(){
  $("[rel=popover]").popover({placement:'left'});
}
于 2012-08-14T06:57:16.387 回答
0

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

$(function ()  
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
于 2013-12-12T13:11:12.223 回答