如何通过从页面上的任何位置（其他）单击来关闭 Twitter Bootstrap 弹出窗口？答案

【问题标题】：How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?如何通过从页面上的任何位置（其他）单击来关闭 Twitter Bootstrap 弹出窗口？
【发布时间】：2012-02-15 09:25:28
【问题描述】：

我目前正在使用带有 Twitter Bootstrap 的弹出框，启动方式如下：

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

如您所见，它们是手动触发的，单击 .popup-marker（这是一个带有背景图像的 div）会切换弹出框。这很好用，但我还希望能够通过单击页面上其他任何位置（但不是在弹出窗口本身！）来关闭弹出窗口。

我尝试了一些不同的方法，包括以下内容，但没有显示任何结果：

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

如何通过单击页面上的其他任何位置而不是单击弹出框本身来关闭弹出框？

【问题讨论】：

嗯，我认为这行得通...您是否偶然在网上找到了此链接？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

假设任何时候只有一个弹出框可见，您可以使用一组标志来标记何时可见弹出框，然后才隐藏它们。

如果您在文档正文上设置了事件监听器，它将在您单击标记有“popup-marker”的元素时触发。所以你必须在事件对象上调用stopPropagation()。并在单击弹出框本身时应用相同的技巧。

以下是执行此操作的有效 JavaScript 代码。它使用 jQuery >= 1.7

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

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

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

唯一需要注意的是，您将无法同时打开 2 个弹出框。但无论如何，我认为这会让用户感到困惑:-)

【讨论】：

单击该 jsfiddle 中的弹出框本身会导致弹出框隐藏 - 不是 tnorthcutt 所要求的。
@RaduCugut 这是一个很好的解决方案。但它有一个错误。在 zzzzz 上单击一次，弹出窗口就会出现。现在在白色背景上单击一次。弹出窗口消失。现在再次单击白色背景。现在再次单击zzzz，它不起作用。 :-|
@Kave 你是对的，我已经修改了小提琴和答案来纠正这个问题。 jsfiddle.net/AFffL/177
为什么不在 $(this).popover('show') 之前运行 $('.popup-marker').popover('hide') （将它们全部隐藏），它会删除需要任何 isVisible 和 clickedAway 变量吗？
这个解决方案给了我一些问题（点击打开的弹出框的“.popup-marker”元素使弹出框之后无法工作）。我想出了另一个对我有用且看起来更简单的解决方案（发布在下面）（我使用的是 Bootstrap 2.3.1）。

【解决方案2】：

jQuery(':not(.popup-marker)').once().click(function(){
   jQuery('.popup-marker').hide(); 
});

【讨论】：

你能为此提供一个小提琴吗？我无法让您的示例正常工作...谢谢
所以，呃……不要太苛刻，但这是一个糟糕的解决方案。首先：它将一个事件监听器绑定到页面中的每个元素。第二：它没有调用.popover('hide') 方法，这可能会导致令人惊讶的事情。第三：它只会工作一次。

【解决方案3】：

我也有类似的需求，发现了这个great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover。他还有一些用法示例here。基本上，它将弹出框更改为交互式组件，当您单击页面上的其他位置或弹出框内的关闭按钮时，该组件将关闭。这也将允许同时打开多个弹出框以及许多其他不错的功能。

Plugin can be found here.

使用示例

<button rel="clickover" data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

javascript：

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

【讨论】：

这真的很棒。超级简单。
优秀的插件！感谢您的链接。
试了一下，效果很好。就像将现有 popover 的 rel 从“popover”更改为“clickover”一样简单。
在 Bootstrap v2.3.1 上运行，没有问题。

【解决方案4】：

这更容易：

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

【讨论】：

同意。至少对我来说，这是正确的做法。第一个选项似乎是“快速修复”。
希望使用它，但由于某种原因没有成功。由于e.stopPropagation();，点击事件从未到达html，而是我使用了$('.popup-marker').on('show', function(event) { $('.popup-marker').filter(function(index, element) { return element != event.target; }).popover('hide'); });之类的东西，它也做得很好（不知道是否存在性能差异）
这是 IMO 的最佳答案。
@pbaron 和 @Cornelis 答案的编译效果最好。我添加的是第二个“点击”函数内的 Cornelis 代码（就在 $(this).popover('toggle'); 部分之前。然后，如果您有多个“弹出标记”对象，单击每个将关闭其他对象。
这个问题的一个问题是弹出框仍然存在，只是被隐藏了。因此，例如，如果您在弹出窗口中有链接，您可以将光标悬停在原来的位置，并且仍然可以在这些链接上更改光标。

【解决方案5】：

我是这样做的

$("a[rel=popover]").click(function(event){
    if(event.which == 1)
    {   
        $thisPopOver = $(this);
        $thisPopOver.popover('toggle');
        $thisPopOver.parent("li").click(function(event){
            event.stopPropagation();
            $("html").click(function(){
                $thisPopOver.popover('hide');
            });
        });
    }
});

希望这会有所帮助！

【讨论】：

【解决方案6】：

https://github.com/lecar-red/bootstrapx-clickover

它是 twitter bootstrap popover 的扩展，可以很简单的解决问题。

【讨论】：

【解决方案7】：

这是对我来说非常有用的解决方案，如果它可以帮助的话：

/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
  if (!compareTo || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
    $('span.btn').popover();
    $('span.btn').unbind("click");
    $('span.btn').bind("click", function(e) {
        e.stopPropagation();
        if($(this).equals(popoverOpened)) return;
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");            
        }
        $(this).popover('show');
        popoverOpened = $(this);
        e.preventDefault();
    });

    $(document).click(function(e) {
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");   
            popoverOpened = null;
        }        
    });
});

【讨论】：

【解决方案8】：

由于某种原因，这里的其他解决方案都不适合我。但是，经过大量的故障排除后，我终于找到了这种完美的方法（至少对我来说）。

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

在我的例子中，我在表格中添加了一个弹出框，并将其绝对定位在被点击的 td 的上方/下方。表格选择由 jQuery-UI Selectable 处理，所以我不确定这是否有干扰。但是，每当我在弹出框内单击时，我的以$('.popover') 为目标的单击处理程序从未起作用，并且事件处理始终委托给$(html) 单击处理程序。我对 JS 还很陌生，所以也许我只是遗漏了一些东西？

无论如何，我希望这对某人有所帮助！

【讨论】：

顺便说一句，我不确定这是否重要，但我将这种方法用于 Bootstrap 2。我认为它适用于 Bootstrap 3，但尚未确认。

【解决方案9】：

尝试data-trigger="focus" 而不是"click"。

这解决了我的问题。

【讨论】：

【解决方案10】：

如果您尝试将 twitter bootstrap popover 与 pjax 一起使用，这对我有用：

App.Utils.Popover = {

  enableAll: function() {
    $('.pk-popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right',
      }
    );
  },

  bindDocumentClickEvent: function(documentObj) {
    $(documentObj).click(function(event) {
      if( !$(event.target).hasClass('pk-popover') ) {
        $('.pk-popover').popover('hide');
      }
    });
  }

};

$(document).on('ready pjax:end', function() {
  App.Utils.Popover.enableAll();
  App.Utils.Popover.bindDocumentClickEvent(this);
});

【讨论】：

【解决方案11】：

我给我所有的popovers锚定类activate_popover。我在加载时立即将它们全部激活

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

为了让我使用的点击离开功能正常工作（在咖啡脚本中）：

$(document).on('click', (e) ->
  clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
  clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
  $(".popover.in").prev().popover('hide')
if clickedOnActivate 
  $(".popover.in").prev().each () ->
    if !$(this).is($(e.target).closest('.activate-popover'))
      $(this).popover('hide')
)

与 bootstrap 2.3.1 完美配合

【讨论】：

这对我有用，除了我必须在第一个 if 子句中去掉 .prev()。我正在使用 Bootstrap 3.2.0.2，也许有区别？此外，如果您希望能够同时打开多个弹出窗口，则可以省略整个第二个 if 子句。只需单击不是弹出框激活元素的任何位置（本示例中为“激活弹出框”类）即可关闭所有打开的弹出框。效果很好！

【解决方案12】：

接受的解决方案给了我一些问题（单击打开的弹出框的“.popup-marker”元素使弹出框之后无法工作）。我想出了另一个非常适合我的解决方案，而且非常简单（我使用的是 Bootstrap 2.3.1）：

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

更新：此代码也适用于 Bootstrap 3！

【讨论】：

这是一个很好的解决方案。谢谢。
很好的解决方案。你为什么不使用if (!$(e.target).is('.popup-marker') && !$(e.target).parents('.popover').length > 0) 这样即使弹出窗口有html内容也不会关闭
或者更好if (!$(e.target).is('.popup-marker') && $(e.target).closest('.popover').length === 0)

【解决方案13】：

@RayOnAir，我对以前的解决方案有同样的问题。我也接近@RayOnAir 解决方案。改进的一件事是在单击其他弹出框标记时关闭已打开的弹出框。所以我的代码是：

var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
  html: true,
  trigger: 'manual'
}).click(function (e) {
  clicked_popover_marker = this;

  $(popover_marker).not(clicked_popover_marker).popover('hide');
  $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
  if (e.target != clicked_popover_marker) {
    $(popover_marker).popover('hide');
    clicked_popover_marker = null;
  }
});

【讨论】：

【解决方案14】：

这是我的解决方案，物有所值：

// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

  // Loop through each popover on the page
  $("[data-toggle=popover]").each(function() {

    // Hide this popover if it's visible and if the user clicked outside of it
    if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
      $(this).popover("hide");
    }

  });
});

【讨论】：

【解决方案15】：

我发现这是上面 pbaron 建议的修改解决方案，因为他的解决方案在所有具有类“popup-marker”的元素上激活了 popover('hide')。但是，当您将 popover() 用于 html 内容而不是数据内容时，正如我在下面所做的那样，该 html 弹出窗口内的任何点击实际上都会激活 popover('hide')，它会立即关闭窗口。下面的这个方法遍历每个 .popup-marker 元素，并首先发现父元素是否与被点击的 .popup-marker 的 id 相关，如果是，则不隐藏它。所有其他 div 都被隐藏...

        $(function(){
            $('html').click(function(e) {
                // this is my departure from pbaron's code above
                // $('.popup-marker').popover('hide');
                $('.popup-marker').each(function() {
                    if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
                        $(this).popover('hide');
                    }
                });
            });

            $('.popup-marker').popover({
                html: true,
                // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
                content: function() { return $('#html-'+$(this).attr('id')).html(); },
                trigger: 'manual'
            }).click(function(e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
        });

【讨论】：

【解决方案16】：

我想出了这个：

我的场景在同一页面上包含更多弹出框，隐藏它们只会使它们不可见，因此，无法单击弹出框后面的项目。这个想法是将特定的弹出框链接标记为“活动”，然后您可以简单地“切换”活动的弹出框。这样做会完全关闭弹出框。

$('.popover-link').popover({ html : true, container: 'body' })

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

【讨论】：

【解决方案17】：

尽管这里有很多解决方案，但我也想提出我的，我不知道那里是否有解决所有问题的解决方案，但我尝试了其中的 3 个，但他们遇到了问题, 就像点击它自己让它隐藏的弹出框一样, 如果我有另一个弹出框按钮单击两个/多个弹出框仍然会出现 (就像在选定的解决方案中一样), 但是, 这个修复了它所有

var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
    var container = $(".popover.in");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if( curr_popover_btn != null )
        {
            $(curr_popover_btn).popover('hide');
            curr_popover_btn = null;
        }
        container.hide();
    }
}
// Hide popovers when out of focus
$('html').click(function(e) {
    hide_popovers(e);
});
$('.popover-marker').popover({
    trigger: 'manual'
}).click(function(e) {
    hide_popovers(e);
    var $popover_btns = $('.popover-marker');
    curr_popover_btn = this;
    var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
                return ( popover_btn !== curr_popover_btn );
            });
    $($other_popover_btns).popover('hide');
    $(this).popover('toggle');
    e.stopPropagation();
});

【讨论】：

【解决方案18】：

所有现有答案都相当薄弱，因为它们依赖于捕获所有文档事件，然后找到活动的弹出框，或修改对.popover()的调用。

更好的方法是监听文档正文上的show.bs.popover 事件，然后做出相应的反应。下面的代码将在单击文档或按下 esc 时关闭弹出框，仅在显示弹出框时绑定事件侦听器：

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

【讨论】：

+1 这是最干净和最可扩展的解决方案。如果您也在使用像骨干这样的框架，只需将其转储到您的初始化代码中，它就会处理弹出框。
这个答案还增加了性能问题，它允许在弹出框内处理更复杂的 HTML。
很好的解决方案；能够很容易地将其放入反应方法中。一个建议，将$(event.target).data("bs.popover").inState.click = false;添加到onPopoverHide函数中，这样关闭后就不需要点击两次重新打开了。
很好奇你是否可以用两个弹出窗口来解决这个问题。在我的应用程序中，当我实现您的代码时，我能够单击弹出窗口并出现多个，然后单击“正文”仅删除显示的最后一个。

【解决方案19】：

在引导程序 2.3.2 上运行时遇到了一些问题。但我是这样处理的：

$(function () {
  $(document).mouseup(function (e) {
        if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
            $('.popover').each(function(){
                $(this).prev('.popInfo').popover('hide');
            });
        }
    });

    $('.popInfo').popover({
        trigger: 'click',
        html: true
    });
});

【讨论】：

【解决方案20】：

稍微调整@David Wolever 解决方案：

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    /* this was giving problems and had a bit of overhead
      $.each(visiblePopovers, function() {
        $(this).popover("hide");
      });
    */
    while (visiblePopovers.length !== 0) {
       $(visiblePopovers.pop()).popover("hide");
    }
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

【讨论】：

【解决方案21】：

这里也有人问过这个问题，我的回答不仅提供了一种理解 jQuery DOM 遍历方法的方法，还提供了 2 个通过单击外部来处理弹出框关闭的选项。

一次打开多个弹出窗口或一次打开一个弹出窗口。

加上这些小代码sn-ps可以处理包含图标的按钮的关闭！

https://stackoverflow.com/a/14857326/1060487

【讨论】：

【解决方案22】：

这个就像一个魅力，我使用它。

当你点击它会打开弹出框，如果你再次点击它会关闭，如果你点击弹出框之外的弹出框也会关闭。

这也适用于超过 1 个弹出框。

    function hideAllPopovers(){
    $('[data-toggle="popover"]').each(function() {
        if ($(this).data("showing") == "true"){
            $(this).data("showing", "false");
            $(this).popover('hide');                
        }
    });
}
$('[data-toggle="popover"]').each(function() {
        $(this).popover({
            html: true,
            trigger: 'manual'
        }).click(function(e) {
            if ($(this).data("showing") !=  "true"){
                hideAllPopovers();
                $(this).data("showing", "true");
                $(this).popover('show');
            }else{
                hideAllPopovers();
            }
            e.stopPropagation();
        });
});

$(document).click(function(e) {
    hideAllPopovers();
});

【讨论】：

这是唯一对我有用的。引导程序 3.20。谢谢。

【解决方案23】：

阅读“下次点击关闭” 这里http://getbootstrap.com/javascript/#popovers

您可以使用焦点触发器在下次单击时关闭弹出框，但您必须使用<a> 标签，而不是<button> 标签，并且您还必须包含tabindex 属性...

例子：

<a href="#" tabindex="0" class="btn btn-lg btn-danger"
  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>

【讨论】：

问题表明，如果点击是在弹出窗口上，他不希望它关闭。这会在任何地方单击任何地方将其关闭。
添加 data-trigger="focus" 阻止了我的弹出框启动，直到我阅读了这篇文章并添加了 tabindex 属性。现在可以了！
有关信息，这也适用于tooltip，即使实际文档中没有明确提及。

【解决方案24】：

我试图为一个简单的问题制定一个简单的解决方案。上面的帖子很好，但对于一个简单的问题来说太复杂了。所以我做了一个简单的事情。刚刚添加了一个关闭按钮。非常适合我。

            $(".popover-link").click(function(){
                $(".mypopover").hide();
                $(this).parent().find(".mypopover").show();
        })
        $('.close').click(function(){
    $(this).parents('.mypopover').css('display','none');
});



          <div class="popover-content">
        <i class="fa fa-times close"></i>
    <h3 class="popover-title">Title here</h3>
your other content here
        </div>


   .popover-content {
    position:relative;
    }
    .close {
        position:absolute;
        color:#CCC;
        right:5px;
        top:5px;
        cursor:pointer;
    }

【讨论】：

【解决方案25】：

我喜欢这个，简单而有效..

var openPopup;

$('[data-toggle="popover"]').on('click',function(){
    if(openPopup){
        $(openPopup).popover('hide');

    }
    openPopup=this;
});

【讨论】：

【解决方案26】：

我会将焦点设置为新创建的弹出框并在模糊时将其移除。这样就不需要检查 DOM 的哪个元素被点击了，弹出框也可以被点击和选中：它不会失去焦点也不会消失。

代码：

    $('.popup-marker').popover({
       html: true,
       trigger: 'manual'
    }).click(function(e) {
       $(this).popover('toggle');
       // set the focus on the popover itself 
       jQuery(".popover").attr("tabindex",-1).focus();
       e.preventDefault();
    });

    // live event, will delete the popover by clicking any part of the page
    $('body').on('blur','.popover',function(){
       $('.popup-marker').popover('hide');
    });

【讨论】：

【解决方案27】：

将btn-popover 类添加到打开弹出框的弹出框按钮/链接。此代码将在单击外部时关闭弹出框。

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

【讨论】：

【解决方案28】：

一个更简单的解决方案，只需遍历所有弹出框并隐藏this。

$(document).on('click', '.popup-marker', function() {
    $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
    var target = $(e.target)[0];
    $('.popup-marker').each(function () {
        // hide any open popovers except for the one we've clicked
        if (!$(this).is(target)) {
            $(this).popover('hide');
        }
    });
});

【讨论】：

【解决方案29】：

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

要清楚，只需触发弹出框

【讨论】：

【解决方案30】：

另一个解决方案，它涵盖了我在单击弹出框的后代时遇到的问题：

$(document).mouseup(function (e) {
    // The target is not popover or popover descendants
    if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
        $("[data-toggle=popover]").popover('hide');
    }
});

【讨论】：