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

Posted 2023-02-22

【中文标题】Twitter Bootstrap 弹出框不适用于动态生成的内容

【英文标题】：Twitter Bootstrap Popovers not working for Dynamically Generated Content

【发布时间】：2012-08-10 10:29:47

【问题描述】：

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

我正在使用 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 来测试解决方案，它起作用了！

【问题讨论】：

如何将 AJAX 调用返回的 HTML 添加到 DOM 中？

类似问题； ***.com/questions/16990573/…

【参考方案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');
  );

【讨论】：

是的，但我认为这是假设的，因为他打电话给$("[rel=popover]").popover(placement:'left');

成功了！你是对的，我的函数是在生成的元素进入 DOM 之前被调用的。非常感谢你的帮助，它也在这个过程中教会了我。现在它完美无缺。如果可以的话，我会投票给你！ xD

您可以随时标记自己问题的正确答案。欢迎使用 ***！

完成！太感谢了！我在 *** 上潜伏了很长时间，直到现在我一直都在找到解决我所有问题的方法……我以为它终于让我失望了，但我错了！ :D

我的意思是，我假设他使用的是 jQuery，因为所有的 Bootstrap JS 文件都依赖于它

【参考方案2】：

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

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

【讨论】：

谢谢！是的，我意识到我的函数是在生成的元素位于 DOM 之前被调用的。非常感谢你的帮助，它也在这个过程中教会了我！

【参考方案3】：

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

$(function ()  

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