Javascript Twitter Bootstrap 弹出框不适用于动态生成的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11947094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Popovers not working for Dynamically Generated Content
提问by ryzh
New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
在这里在 stackoverflow 上发帖的新手，如果我在这里搞砸了任何事情，我提前道歉。
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
我正在使用 Twitter Bootstrap 的弹出窗口。我的弹出窗口似乎适用于我手动输入到 HTML 文档中的元素 - 但不适用于我通过 Javascript / Ajax 动态生成的元素。
For example, the popover seems to work if I manually add this directly to my HTML document:
例如，如果我手动将其直接添加到我的 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>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
但我真正需要的是动态生成的元素具有弹出窗口。我使用 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>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
... 果然，出现了“hover for popover”的字样——但 popover 本身不起作用！
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
这已经让我发疯了一段时间，如果有人能向我伸出援助之手，那就太不可思议了！我还添加了我用来在下面启用 Bootstrap 弹出窗口的 JQuery 函数，这是值得的。
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
我对类似的问题进行了彻底的搜索，我能找到的最好的就是这个链接。但该链接似乎也没有任何解决方案。再次提前致谢！
UPDATE:
更新：
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
固定的！非常感谢所有提供帮助的人。我的问题是在将元素添加到文档对象模型之前调用了该函数。有多种可能的修复方法 - 我只是通过将 popover 函数移到 Ajax 函数的 END 来测试解决方案并且它起作用了！
采纳答案by nickaknudson
You need to call $("[rel=popover]").popover({placement:'left'});AFTER the elements are in the DOM.
您需要$("[rel=popover]").popover({placement:'left'});在元素位于 DOM 中之后调用。
UPDATE
更新
If you are using jQuery
如果您使用 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'});
});
ORa catch all for jQuery ajax requests
或全部用于 jQuery ajax 请求
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
回答by Nick
In the success function of the ajax you need to call the popover. Something like this
在 ajax 的成功函数中，你需要调用 popover。像这样的东西
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
回答by Hassan Ali Shahzad
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
此功能将在选择器中正常工作您必须指定页面上的位置，您必须像我所说的那样搜索“rel = popover” *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
