Bootstrap Popover Doesn't Close on Clicking Outside

问题

I followed this solution on how to close a Bootstrap Popover when clicking anywhere outside, https://stackoverflow.com/a/14857326/1005607

$('body').on('click', function (e) {
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

But something still doesn't work, my JSFiddle: https://jsfiddle.net/m2k0wgys/3/

In this JSFiddle, clicking outside doesn't close the Popover. My Popovers are nested inside A-links. Sample format:

<a href="..>
   <input type="image" src="info.png" data-toggle="popover" data-content=".." />
</a>

回答1:

I managed to solve it by adding following line of code to img tag

data-trigger="focus" role="button" tabindex="0"

Also the above body click js code is also not needed. Remove that can code and it should work fine.

The reference of above code can be found in documentation here https://getbootstrap.com/docs/3.3/javascript/#popovers

Hope this helps, let me know in case of any doubts.

回答2:

For buttons containing text only:

$('body').on('click', function (e) {
//did not click a popover toggle or popover
if ($(e.target).data('toggle') !== 'popover'
    && $(e.target).parents('.popover.in').length === 0) { 
    $('[data-toggle="popover"]').popover('hide');
}

});

check the stackoverflow link enter link description here

来源：https://stackoverflow.com/questions/47719309/bootstrap-popover-doesnt-close-on-clicking-outside