Bootstrap popover destroy&recreate 仅每秒工作一次

Bootstrap popover destroy & recreate works only every second time

本文关键字：工作 一次 destroy popover amp recreate Bootstrap      更新时间：2023-09-26

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

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

而且它每隔一段时间才有效。我认为这是销毁弹出框所需的时间问题，但即使在两行之间添加延迟也无济于事。我在JSFiddle中重现了这个问题：http://jsfiddle.net/Lfp9ssd0/10/

为什么会这样？有人建议它可以工作，例如在Twitter引导弹出中，通过ajax和Bootstrap Popover重新初始化动态生成的内容(刷新内容(

当我

跳过销毁时，它工作得很好，但我不确定当我为一个元素创建另一个弹出窗口而不破坏已经存在的弹出窗口时会发生什么。它是重新初始化还是创建一个新的弹出窗口而无法访问旧弹出窗口？

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

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

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

我遇到了与此处描述的相同的问题。经过广泛的搜索，我找到了一种方法来更改弹出窗口的内容，而不必先销毁它。只需初始化弹出框而不指定内容选项。

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

请注意，上面的弹出框初始化未指定内容。弹出窗口尚无法显示，它没有内容。现在指定条件，然后导致弹出窗口中显示的不同类型的文本。

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');

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

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

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

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

这在 Bootstrap 5 中对我有用：

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