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

【问题标题】：Cloning elements that have Twitter Bootstrap popover produces a popup in the wrong place克隆具有 Twitter Bootstrap 弹出窗口的元素会在错误的位置产生弹出窗口
【发布时间】：2012-09-15 07:57:53
【问题描述】：

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

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

问题在于，当新克隆的弹出框触发时，弹出框的位置错误。

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() 新元素，它看起来很好。如果我将鼠标悬停在它上面，会触发一个弹出框，但它会出现在浏览器窗口的左上角 - 在左侧被截掉一半。

如果我使包含弹出框元素的

可见 - 即删除 display:none，那么弹出框将出现在原始的、非动态创建的 DOM 元素上，而不是新克隆的元素上。

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

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

或者，我最好尝试让动态创建的弹出框像this jsFiddle snippet 一样工作。

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

任何建议将不胜感激。

【问题讨论】：

标签： javascript jquery twitter-bootstrap clone popover

【解决方案1】：

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

【讨论】：

感谢 Rick 的回复，但我不确定我是否理解。你是说一旦我克隆了带有弹出框的静态元素，我就需要重新调用 popover() 函数？如果是这样，那么我认为我可能对 popover 的工作方式有问题。我的理解是，对于动态创建的元素（就像我克隆的元素一样），您需要在弹出框上使用 selector: 选项，这就是我遇到的弹出框无法正确隐藏的问题。
将其设为代码的最后一行： $('.popoverbottom').popover() 或者在每次克隆和追加后调用它。这有意义吗？
Rich（不是 Rick - 抱歉），成功了。我没有意识到我必须重新调用 .popover()。但是正如您所说，对于可能会发现此问题的其他人，似乎因为 .clone(true) 复制元素但不复制任何绑定函数，所以我需要重新声明该函数。但老实说，如果我必须这样做，那么克隆不是我正在寻找的解决方案。所以我现在将重新调查我在动态弹出窗口中遇到的问题。感谢您的帮助。
bletch，重新阅读您的原始问题...是的，如果您已经在创建用作弹出框的 DOM 元素，我不明白您为什么需要克隆它们并附加它们。只需将隐藏的元素本身变成弹出框，并在需要时取消隐藏它们。如果你提供了 html 和 js，我可能会给你更具体的建议。副手，看来克隆不是你想做的。