Twitter引导程序Popover不适用于动态生成的内容

一尘不染

Twitter引导程序Popover不适用于动态生成的内容

ajax

在这里发布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>";

…确实，出现了“悬停于弹出框”一词-但弹出框本身不起作用！

这已经让我发疯了一段时间，如果有人能帮助我，这将是不可思议的！我还添加了用于启用Bootstrap弹出式窗口的JQuery函数，这是值得的。

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

更新：

固定！非常感谢大家的帮助。我的问题是，在将元素添加到文档对象模型之前，该函数被调用了。有多个可能的修复程序-我只是通过将popover函数移至Ajax函数的END来测试了该解决方案，并且它起作用了！

阅读 216

2020-07-26

共1个答案

一尘不染

您需要$("[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'});
  });

2020-07-26