Bootstrap popover只会每隔一次销毁和重新创建

Question

我想以编程方式销毁并重新创建特定的Bootstrap popover.所以我做的是:

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

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

为什么会那样？有人建议它可以工作,例如在Twitter Bootstrap Popover中通过ajax和Bootstrap Popover Reinitialization 动态生成内容(刷新内容)

当我跳过破坏时它工作得很好,但我不确定当我为一个元素创建另一个弹出框而不破坏已经存在的弹出时会发生什么.它是重新初始化还是创建了一个新的popover而失去了对旧的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

我遇到了和此处描述的问题相同的问题.经过广泛的搜索,我找到了一种方法来改变弹出窗口的内容,而不必先破坏它.只需初始化popover而不指定content选项.

$('#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!"
}

现在我们准备好展示popover了.

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

从Bootstrap 3.0开始,这对我有用.当然,当您准备就绪时,您可以像往常一样在页面上发生相应事件时销毁或隐藏您的弹出窗口.

更新: 如果你只需要改变文本酥料饼后的酥料饼已经显示出来,你基本上可以使用相同的技术.1)获取popover附加的DOM然后更改内容并2)再次显示popover.示例如下:

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