克隆具有 Twitter Bootstrap 弹出窗口的元素会在错误的位置产生弹出窗口

Question

我在让 Bootstrap 弹出窗口与动态创建的元素一起工作时遇到了问题（但这是一个不同的问题）。

因此，作为一种变通方法，并且由于这些 popover 元素的内容本身实际上并不是动态的，因此我决定创建一系列带有 popover 的隐藏元素，这些元素在 HTML 加载时已经存在于 DOM 中。然后我计划使用 JQuery 的 clone() 克隆它们并将它们放在我需要的地方。

问题是，当新克隆的 popover 触发时，popover 的位置错误。

HTML 看起来像这样

<div style="display: none">
    <span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>

然后我使用如下代码在 popoverbottom 类上注册 popover 事件：

$(".popoverbottom").popover( {placement : 'bottom',  trigger: 'hover', delay: { show: 500, hide: 100 }} ); 

然后我使用 JQuery 代码克隆带有弹出框的元素，如下所示：

e = $('#anid').clone(true);
e.attr('id','anewid');

然后我动态 append() 新元素，它看起来很好。如果我将鼠标悬停在它上面，会触发一个弹出窗口，但它会出现在浏览器窗口的左上角 - 在左侧被截断一半。

如果我让包含 popover 元素的 <div> 可见 - 即删除 display:none，则 popover 出现在原始的、非动态创建的 DOM 元素上，而不是新克隆的元素上。

这显然是因为在注册 popover 时，popover 是绑定到原始元素的。虽然 JQuery 的 .clone(true) 似乎复制了元素和关联的事件，但原始弹出框位置并未更新。

有没有办法告诉 popover 它已被克隆并且需要将 popover 附加到新元素？

或者，我会不会更好地尝试让动态创建的弹出窗口在这个 jsFiddle snippet 中工作。

如上所述，我确实尝试使这种动态方法起作用，但是遇到了多个弹出窗口会停留在屏幕上并且在鼠标移开时不会隐藏的问题 - 但这是另一个问题。

任何意见，将不胜感激。

Answer 1

我认为问题在于 Bootstrap 在您将所有克隆的 popover 节点添加到 DOM 之前创建了 popover。您需要注册新添加的弹出框。在附加所有克隆节点之前，不要调用 $(".popoverbottom").popover()。$.clone(true) 复制事件，但不附加函数。popover() 是一个函数，而不是一个事件。