小编Ble*_*tch的帖子

我在让 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 是绑定到原始元素的。虽然 …