2

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

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

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

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

或者，我最好尝试让动态创建的弹出框在这个 jsFiddle 片段中工作。

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

任何意见，将不胜感激。

4

1 回答 1

5

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

于 2012-09-15T08:11:07.253 回答