Question

我想以编程方式销毁＆amp;重新创建一个特定的Bootstrap popover。所以我所做的是：

$('#popoverspan').popover('destroy');
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'});

它每隔一秒才有效。我认为这是破坏弹出窗口所需时间的问题，但即使在两条线之间增加延迟也无济于事。我在JSFiddle中重新创建了这个问题：http://jsfiddle.net/Lfp9ssd0/10/

为什么会那样？有人建议它有效，例如在Twitter Bootstrap Popover with dynamically generated content via ajax和Bootstrap Popover Reinitialization (To refresh Content)

中

当我跳过破坏时，它工作正常，但我不确定当我为元素创建另一个弹出框而不破坏已存在的弹出时会发生什么。它是重新初始化还是创建了一个新的popover而失去了对旧版本的访问权限？

Answer 1

自己解决了。显然.popover('destroy')是异步的，立即创建另一个弹出窗口失败，而前一个弹出窗口正在被销毁。我尝试使用alert添加延迟，但由于某种原因失败了。在创建新的弹出窗口之前使用setTimeout()并不是最优雅但最有效的解决方案：

$('#popoverspan').popover('destroy');
setTimeout(function () {
    $('#popoverspan').popover({
        placement : 'bottom', 
        trigger : 'hover', 
        content : 'Here is new popover!'
    });
}, 200);

200毫秒似乎已经足够了，但在其他情况下可能需要微调。

Answer 2

设置'animation': false为我修复了

Answer 3

@Deniz答案很棒，但是如果你想在显示popover之后更改标题/内容并且你使用较旧的Bootstrap版本（我的是3.3.1），你应该使用$('.your_popover_target').data('popover').options.content = "new text"代替{ {1}}，然后是.data('bs.popover');

Answer 4

我尝试了setTimeout方法，由于某些原因它没有工作，然后我深入研究了popover对象，实际上有一个destroy()方法可以正常工作。 E.g：

var popover = $.data($('#popoverspan'), "bs.popover");
popover.destroy();

Answer 5

这在 Bootstrap 5 中对我有用：

const toggler = document.querySelector('#popoverspan');
const popover = bootstrap.Popover.getInstance(toggler);
if (popover) {
    popover.dispose();
}
new bootstrap.Popover(toggler, options);

Bootstrap popover destroy＆amp;每隔一次重新创作一次

5 个答案: