Twitter的引导Popovers不工作的动态生成的内容 [英] Twitter Bootstrap Popovers not working for Dynamically Generated Content

问题描述

新张贴的计算器在这里，所以我的道歉提前如果我在这里把事情搞得一团糟。

New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.

我使用Twitter引导的popovers。我popovers似乎是工作的内容​​，我手动输入到我的HTML文档 - 但不是说我通过JavaScript / AJAX动态生成元素

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.

例如，在popover似乎工作，如果我直接手动添加此到我的HTML文档：

For example, the popover seems to work if I manually add this directly to my HTML document:

<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>

但我真正需要的是我的动态生成的元素有popovers。我用一个XMLHtt prequest将请求发送到PHP文件，然后抓住这个responseText并显示它。当我此行的code添加到我前面提到的PHP文件：

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:

 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>";

...肯定的是，写着悬停popover的出现 - 但popover本身无法正常工作

... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!

这是我发疯了一段时间，这将是令人难以置信的，如果有人能借我伸出援助之手！我还添加了jQuery函数我使用使引导的popovers下面，什么是值得。

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.

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

我已经做了彻底的搜查类似的问题，最好的我能找到的是<一个href="http://stackoverflow.com/questions/11588645/add-twitter-bootstrap-popover-via-ajax-with-rails/"标题=点击这里>这个链接。不过，该链接似乎并不要么有任何解决方案。在此先感谢了！

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!

更新：

固定！非常感谢大家谁帮助了。我的问题是，该函数被调用之前的元素被加入到文档对象模型。有多种可能的修正 - ！我只是测试了该解决方案通过移动popover功能给Ajax功能的末端，它的工作

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]）popover（{位置：'左'}）; 之后的元素在DOM。

You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.

更新

如果你正在使用jQuery

If you are using 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请求的catch

OR a catch all for jQuery ajax requests

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

这篇关于Twitter的引导Popovers不工作的动态生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！