隐藏显示的引导弹出框后需要单击两次

Question

$('#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 相同。对不起，之前的链接是错误的。这个是对的。

隐藏显示的弹出框后，我需要单击弹出框触发器两次才能再次显示。

这是一个错误吗？有什么办法可以避免吗？

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

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

比我需要单击“#popoverTrigger”两次才能显示它。

愚蠢的解决方案

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

还有什么好主意吗？

Answer 1

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

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

https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340

我已经在隐藏事件中应用了：

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});

这对我有用。与建议的修复完全相同：

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
});

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

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

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

Answer 2

我最近遇到了这个错误，这就是我修复它的方法：

$('.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();
    });

Answer 3

这是 v3.3.5 中的一个错误：

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

暂时使用 3.3.4 直到它被修复。

Answer 4

只需使用这个：

$('[data-toggle="popover"]').popover('toggle');

代替：

$('[data-toggle="popover"]').popover();

Answer 5

我有一个弹出窗口在 3 秒后淡出，需要双击才能重新打开。按照达伦的解决方案，它奏效了。

$(function () {

    $('#popLinks').popover({
        html: true,
        trigger: 'manual',
        animation: true
    });

    $('#popLinks').click(function () {
        $(this).popover('show');
        setTimeout(function () {
            $('.popover').fadeOut('slow');
        }, 3000);
        e.preventDefault();
    });    
});

Answer 6

我在上面使用了达伦的答案。抱歉，达伦，我仍然无法评论其他人的帖子。 不过有一点点变化。我将“显示”更改为“切换”以便能够切换弹出框。

发件人：

$(this).popover('show');

到

$(this).popover('toggle');

Answer 7

确保 popover 只会被初始化一次。如果它会被初始化超过 一次跨越不同的文件，您可能会遇到此问题。

$('[data-toggle=popover]').popover({
    placement : 'bottom'
});

Answer 8

我使用下面的代码行解决了这个问题：

说明：使用 show.bs.popover 事件在显示新的弹出框之前隐藏显示的弹出框

重要！不要使用 $('.popover').hide();它会阻止弹出窗口显示，直到您单击两次，但使用 $('element').popover('hide') 代替

$('[data-toggle="popover"]').on('show.bs.popover', function () {
                                    try {
                                        $('element').popover('hide');
                                    } catch (ex) {
                                        console.log(ex);
                                    }
                                });
// then use $('[data-toggle="popover"]').popover(); to show your popover

它也适用于多个弹出窗口。