need click twice after hide a shown bootstrap popo

问题:

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

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

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

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

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?

回答1:

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

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

For Bootstrap 4 use _activeTrigger instead of inState:

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

回答2:

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

回答3:

It's a bug in v3.3.5:

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

Just use 3.3.4 for now until it is fixed.

回答4:

I had a popup that fades out after 3 secs and needed double click to reopen it. Followed Darren's solution and it worked.

$(function () {

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

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

回答5:

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.

From:

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

To

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

回答6:

Simply use this:

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

Instead of:

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

回答7:

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.

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