Bootstrap popover destroy and recreate 仅每秒钟工作一次答案

【问题标题】：Bootstrap popover destroy & recreate works only every second timeBootstrap popover destroy and recreate 仅每秒钟工作一次
【发布时间】：2015-01-30 01:56:32
【问题描述】：

我想以编程方式销毁并重新创建特定的 Bootstrap 弹出窗口。所以我要做的是：

$('#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)

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

【问题讨论】：

标签： javascript twitter-bootstrap popover

【解决方案1】：

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

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

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

【讨论】：

当吉特！这让我发疯了。我从没想过这会是一个异步调用。感谢您的提醒！
我也猜这是一个异步调用......现在你验证这个猜测。非常难，至少需要我 2 小时:(
谢谢你救了我！我在这上面花了几个小时！

【解决方案2】：

我遇到了与此处描述的相同的问题。经过广泛的搜索，我找到了一种无需先将其销毁即可更改弹出框内容的方法。只需在没有指定内容选项的情况下初始化弹出框。

$('#popoverspan').popover({
    placement : 'bottom',
    trigger : 'hover', 
});

注意上面的popover初始化并没有指定内容。弹出框还不能显示，它没有内容。现在指定导致弹出窗口中显示不同类型文本的条件。

if (condition_1) {
    $("#popoverspan").data('bs.popover').options.content = "Something important here!"
}
else {
    $("#popoverspan").data('bs.popover').options.content = "This is also important!"
}

现在我们准备好显示弹出框了。

$("#popoverspan").popover('show');

从 Bootstrap 3.0 开始，这对我有用。当然，当您准备好后，您始终可以在页面上发生相应事件时照常销毁或隐藏弹出框。

更新： 如果您只需要在弹出框已经显示后更改弹出框中的文本，则基本上可以使用相同的技术。 1）获取附加弹出窗口的DOM，然后更改内容并2）再次显示弹出窗口。下面的例子：

$("#popoverspan").data('bs.popover').options.content = "some new text";
$("#popoverspan").popover('show');

【讨论】：

【解决方案3】：

@Deniz 答案很好，但是如果您想在显示弹出框后更改标题/内容并且您使用的是较旧的 Bootstrap 版本（我的是 3.3.1），您应该使用 $('.your_popover_target').data('popover').options.content = "new text" 而不是 .data('bs.popover') ，后跟$('.your_popover_target').popover('show')；

【讨论】：

【解决方案4】：

我尝试了 setTimeout 方法，但由于某种原因它不起作用，然后我更深入地研究了 popover 对象，实际上有一个 destroy() 方法工作得很好。例如：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

这在 Bootstrap 5 中对我有用：

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

【讨论】：