我在使用 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');
然后我动态地追加()新元素，它看起来很好。如果我将鼠标悬停在它上面，则会触发一个弹出窗口，但它出现在浏览器窗口的左上角 - 左侧被切掉一半。
如果我使包含弹出框元素的
这显然是因为当注册弹出窗口时，弹出窗口与原始元素绑定(bind)在一起。虽然 JQuery 的 .clone(true) 似乎复制了元素和关联的事件，但原始弹出窗口位置并未更新。
有没有办法告诉弹出窗口它已被克隆并且需要将弹出窗口附加到新元素？
或者，我最好尝试让动态创建的弹出窗口像 this jsFiddle snippet 一样工作。 。
如上所述，我确实尝试过让这种动态方法发挥作用，但遇到了一些问题，即多个弹出窗口会保留在屏幕上，并且当鼠标移开时不会隐藏 - 但这是另一个问题。
如有任何建议，我们将不胜感激。
最佳答案
我认为问题在于 Bootstrap 在将所有克隆的弹出窗口节点添加到 DOM 之前创建了弹出窗口。您需要注册新添加的弹出窗口。在附加所有克隆节点之前，请勿调用 $(".popoverbottom").popover()。 $.clone(true) 复制事件，但不附加函数。 popover() 是一个函数，而不是一个事件。
关于javascript - 克隆具有 Twitter Bootstrap 弹出窗口的元素会在错误的位置生成弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12435629/