Twitter Bootstrap Popovers不适用于动态生成的内容

问题描述：

这里是发布在stackoverflow上的新功能，所以如果我在这里搞砸了任何事情，我很抱歉。Twitter Bootstrap Popovers不适用于动态生成的内容

我正在使用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>

但我真正需要的是我的动态生成的元素有popovers。我使用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'}); 
});

我已经做了彻底的搜查类似的问题，我能找到的最好是this link。但是这个链接似乎也没有任何解决方案。再次感谢您！

UPDATE：

固定！非常感谢所有帮助过我的人。我的问题是，在将元素添加到文档对象模型之前，函数被调用。有多种可能的修复方法 - 我简单地通过将弹出窗口函数移动到Ajax函数的END来测试解决方案，并且它工作正常！

你怎么在页面上指定的位置将AJAX调用返回的HTML添加到DOM？ – 2012-08-14 06:49:21

类似的问题; http://stackoverflow.com/questions/16990573/how-to-bind-bootstrap-popover-on-dynamic-elements – 2013-12-20 07:54:58

答

您需要在元素位于DOM后调用$("[rel=popover]").popover({placement:'left'});。

UPDATE

如果您正在使用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'}); 
    });

OR所有的jQuery AJAX的catch请求

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

他必须使用jQuery，对吧？ – 2012-08-14 07:00:30

是的，但我认为这是因为他调用'$（“[rel = popover]”）。popover（{placement：'left'}）;' – nickaknudson 2012-08-14 07:15:52

它工作！你是对的，我的函数被调用之前生成的元素是在DOM中。非常感谢你的帮助，它也教会了我在这个过程中。现在它完美地工作。如果可以的话，我会投你一票！ xD – ryzh 2012-08-14 07:18:51

答

在你需要的AJAX的成功功能打电话给popover。这样

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

谢谢！是的，我意识到我的函数在DOM中生成元素之前被调用。非常感谢你的帮助，它也教会了我在这个过程中！ – ryzh 2012-08-14 07:18:35

不客气... – Nick 2012-08-14 08:33:47

答

东西这个功能将在选择器正常工作，你必须在那里你必须寻找“相对=酥料饼”就像我把*

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

Twitter Bootstrap Popovers不适用于动态生成的内容

相关推荐