Bootstrap popover,隐藏在外面点击？

Question

使用bootstrap popover,现在我试图让这个代码在popover外面点击以关闭popover:

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

但是,当我使用这个部分时,我可以关闭弹出窗口,但我不能点击其他按钮,任何人都知道我怎么能这样做？

所有按钮:

<a href="#" class="btn btn-xs btn-primary" data-toggle="popover">This opens popover</a>
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 
<a href="#" class="btn btn-xs btn-primary">Other link</a> <- Doesn't work 

Answer 1

我发现了这个:http://bootply.com/99372

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

这几乎与你的代码相同......

Answer 2

只需添加此元素即可在下次单击时关闭弹出窗口。

data-trigger="focus" 

来自这里的参考： Bootstrap Popover

Answer 3

事实上，你甚至不需要 JS，因为在 Bootstrap 中已经有一个设置。

请参阅：http : //getbootstrap.com/javascript/#dismiss-on-next-click

“下一次点击关闭所需的特定标记为了正确的跨浏览器和跨平台行为，您必须使用<a>标签，而不是<button>标签，并且您还必须包括 role="button" 和 tabindex 属性。”

前任。：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Answer 4

尝试这个。单击弹出窗口的外部时，它将关闭弹出窗口。

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

另一种解决方案，

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

添加tabindex="0"和data-trigger="focus"