twitter-bootstrap 隐藏显示的引导程序弹出窗口后需要单击两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32581987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
need click twice after hide a shown bootstrap popover
提问by Shel Yang
$('#popoverlink').popover();
$("#popoverhide").click(function() {
$("#popoverlink").popover("hide");
});#popoverlink {
position: absolute;
top: 100px;
left: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" id="popoverlink" class="btn" rel="popover" title="Some title">Popover</a>
<a href="#" id="popoverhide" class="btn" rel="popover" title="Some title">hide</a>Same with the fiddle. Sorry the previous link was wrong. This one is correct.
与小提琴相同。对不起，之前的链接是错误的。这个是对的。
After I hide the shown popover, I need to click the popover trigger twice to show it again.
隐藏显示的弹出窗口后，我需要单击弹出窗口触发器两次以再次显示它。
Is this a bug? Is there anything can avoid this?
这是一个错误吗？有什么可以避免这种情况吗？
UPDATEI means I used another button to hide a popover by
更新我的意思是我用另一个按钮来隐藏一个弹出框
$("#popoverTrigger").popover("hide");
Than I need to click the "#popoverTrigger" twice to show it.
比我需要单击“#popoverTrigger”两次以显示它。
STUPID SOLUTION
愚蠢的解决方案
$("popoverhide").click(function() {
var f = false;
if($("popoverlink").next('div.popover:visible')) {
f = true;
$("popoverlink").popover("hide");
}
if(f) {
$("popoverlink").click();
}
})
Is there another good idea?
还有其他好主意吗？
回答by Jules
Still not fixed in 3.3.6 but I found a proposed solution here:
仍然没有在 3.3.6 中修复，但我在这里找到了一个建议的解决方案：
https://github.com/twbs/bootstrap/issues/16732
https://github.com/twbs/bootstrap/issues/16732
https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340
https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340
I've applied it in the hidden event:
我已经在隐藏事件中应用了它：
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
This works for me. To be exactly the same as the proposed fix it would be:
这对我有用。要与建议的修复完全相同，它将是：
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
});
Note: I use delegated popovers which is why i'm using the $('body') reference.
注意：我使用委托弹出框，这就是我使用 $('body') 引用的原因。
For Bootstrap 4use _activeTriggerinstead of inState:
对于Bootstrap 4使用_activeTrigger而不是inState：
$(e.target).data("bs.popover")._activeTrigger.click = false
回答by Darren Sweeney
I recently came across this bug and this is how I fixed it:
我最近遇到了这个错误，这就是我修复它的方法：
$('.myPopoverClass')
.popover({
trigger: 'manual', /* <- important, instantiates popover */
container: 'body', /* optional */
animation: false
})
.click(function(e) {
$('.popover').not(this).hide(); /* optional, hide other popovers */
$(this).popover('show'); /* show popover now it's setup */
e.preventDefault();
});
回答by CpnCrunch
It's a bug in v3.3.5:
这是 v3.3.5 中的一个错误：
https://github.com/twbs/bootstrap/issues/16732
https://github.com/twbs/bootstrap/issues/16732
Just use 3.3.4 for now until it is fixed.
暂时使用 3.3.4 直到它被修复。
回答by Subha
I had a popup that fades out after 3 secs and needed double click to reopen it. Followed Darren's solution and it worked.
我有一个弹出窗口，它在 3 秒后淡出，需要双击才能重新打开它。遵循达伦的解决方案，它奏效了。
$(function () {
$('#popLinks').popover({
html: true,
trigger: 'manual',
animation: true
});
$('#popLinks').click(function () {
$(this).popover('show');
setTimeout(function () {
$('.popover').fadeOut('slow');
}, 3000);
e.preventDefault();
});
});
回答by Chennakesava
make sure popover will be initialized only once.if it will be initialized more than one time across different files you may get this problem.
确保 popover 只会被初始化一次。如果它会在不同的文件中被初始化多次，你可能会遇到这个问题。
$('[data-toggle=popover]').popover({
placement : 'bottom'
});
回答by Jim Raynor
I used Darren's answer above. Sorry Darren, I still can't comment on other's post. One slight change though. I changed 'show' to 'toggle' to be able to toggle the popup box.
我使用了上面达伦的回答。抱歉 Darren，我仍然无法评论其他人的帖子。虽然有一点点变化。我将“显示”更改为“切换”以便能够切换弹出框。
From:
从：
$(this).popover('show');
To
到
$(this).popover('toggle');
回答by dimple patel
Simply use this:
只需使用这个：
$('[data-toggle="popover"]').popover('toggle');
Instead of:
代替：
$('[data-toggle="popover"]').popover();
