隐藏显示的引导程序弹出窗口后需要单击两次 [英] need click twice after hide a shown bootstrap popover

问题描述

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

与 fiddle 相同.对不起，之前的链接是错误的.这个是对的.

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?

更新我的意思是我用另一个按钮来隐藏一个弹出框

UPDATE I means I used another button to hide a popover by

$("#popoverTrigger").popover("hide");

我需要点击#popoverTrigger"两次才能显示它.

Than I need to click the "#popoverTrigger" twice to show it.

愚蠢的解决方案

$("popoverhide").click(function() {
    var f = false;
    if($("popoverlink").next('div.popover:visible')) {
        f = true;
        $("popoverlink").popover("hide");
    }
    if(f) {
        $("popoverlink").click();
    }
})

还有其他好主意吗?

推荐答案

在 3.3.6 中仍未修复，但我在这里找到了一个建议的解决方案:

Still not fixed in 3.3.6 but I found a proposed solution here:

https://github.com/twbs/bootstrap/issues/16732

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

注意:我使用委托弹出框，这就是我使用 $('body') 引用的原因.

Note: I use delegated popovers which is why i'm using the $('body') reference.

对于 Bootstrap 4 使用 _activeTrigger 而不是 inState:

For Bootstrap 4 use _activeTrigger instead of inState:

$(e.target).data("bs.popover")._activeTrigger.click = false

这篇关于隐藏显示的引导程序弹出窗口后需要单击两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！