Javascript Bootstrap popover destroy&;“重新创建”仅每秒工作一次
我想以编程方式销毁并重新创建一个特定的引导弹出框。所以我要做的是:Javascript Bootstrap popover destroy&;“重新创建”仅每秒工作一次,javascript,twitter-bootstrap,popover,Javascript,Twitter Bootstrap,Popover,我想以编程方式销毁并重新创建一个特定的引导弹出框。所以我要做的是: $('#popoverspan').popover('destroy'); $('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'}); 它每秒钟只工作一次。我认为这是销毁popover所需时间的问题,但即使在两行之间增加延迟也无济于事。我在JSFIDLE中重新创建了这个问题: 为什么会这样?有人建议
$('#popoverspan').popover('destroy');
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'});
它每秒钟只工作一次。我认为这是销毁popover所需时间的问题,但即使在两行之间增加延迟也无济于事。我在JSFIDLE中重新创建了这个问题:
为什么会这样?有人建议它可以工作,例如在和
当我跳过销毁时,它工作得很好,但是我不确定当我为一个元素创建另一个popover而不销毁已经存在的popover时会发生什么。它是重新初始化还是创建了一个新的popover,却失去了对旧popover的访问权限?自己解决了这个问题。显然,
.popover('destroy')
是异步的,当前一个popover被销毁时,立即创建另一个popover失败。我尝试使用警报添加延迟,但由于某种原因失败。在创建新的popover之前使用setTimeout()
,这不是最优雅的解决方案,但很有效:
$('#popoverspan').popover('destroy');
setTimeout(function () {
$('#popoverspan').popover({
placement : 'bottom',
trigger : 'hover',
content : 'Here is new popover!'
});
}, 200);
200毫秒似乎足够了,但在其他情况下可能需要微调。我遇到了与本文所述相同的问题。经过广泛的搜索,我找到了一种方法来改变popover的内容,而不必先销毁它。只需在不指定内容选项的情况下初始化popover
$('#popoverspan').popover({
placement : 'bottom',
trigger : 'hover',
});
请注意,上面的popover初始化没有指定内容。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');
现在我们已经准备好展示府绸了
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');
从Bootstrap3.0开始,这对我很有效。当然,当你准备好了,你总是可以像往常一样在你的页面上发生适当的事件时销毁或隐藏你的popover
更新:
如果您只需要在popover显示后更改popover中的文本,基本上可以使用相同的技术。1) 获取连接popover的DOM,然后更改内容,2)再次显示popover。示例如下:
$("#popoverspan").data('bs.popover').options.content = "some new text";
$("#popoverspan").popover('show');
@Deniz的回答很好,但是如果您想在显示popover后更改标题/内容,并且您使用的是较旧的引导版本(我的版本是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();
设置'animation':false
为我修复了它Dangit!这让我发疯。我从没想过这会是一个异步调用。谢谢你的提醒!我也猜这是一个异步调用。。现在你验证了这个猜测。非常辛苦,至少花了我两个小时:(谢谢你救了我!我已经花了好几个小时在这上面了!