单击外部时使用 HTML 关闭弹出窗口

Question

我正在使用 Bootstrap Popover，弹出窗口内容是 HTML。我使用下面的代码来初始弹出窗口。此代码基于/sf/answers/924271351/这个答案。弹出窗口内容位于 id 的 div 中#song-status-popover。

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

我想在单击弹出窗口外部时关闭弹出窗口，因此我使用了以下代码：

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

到目前为止，它运行得很好，但我在同时使用这两个代码时面临一个问题。当我打开弹出窗口并单击外部将其关闭时，如果我再次单击链接以打开弹出窗口，则第一次单击时它不会打开。我必须点击两次才能打开它。

我想知道我缺少什么以及为什么我在通过单击外部关闭弹出窗口后无法一键打开弹出窗口。请帮忙！

更新：我相信，当我单击外部时，它会隐藏弹出窗口，但引导程序仍然认为它是打开的，第一次单击时，它实际上认为它已关闭，第二次单击时，它打开弹出窗口。

Answer 1

尝试下面的代码

$('html').on('click', function(e) {
  if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
    $(".song-status-link").popover('hide');
  }
});

http://jsfiddle.net/xzeb91hf/