刚开始在 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 文件,然后获取响应文本并显示它。当我将这行代码添加到前面提到的 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'});
});
我对类似问题进行了彻底的搜索,我能找到的最好的是 this link 。但该链接似乎也没有任何解决方案。再次提前致谢!
更新:
已修复!非常感谢所有提供帮助的人。我的问题是在将元素添加到文档对象模型之前调用该函数。有多种可能的修复方法 - 我只是通过将弹出窗口函数移至 Ajax 函数的末尾来测试解决方案,它起作用了!
最佳答案
您需要在元素位于 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'});
});
关于javascript - Twitter Bootstrap Popovers 不适用于动态生成的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11947094/