jQuery - Twitter Bootstrap - 关闭身体上任何元素焦点的所有弹出窗口

Question

我正在尝试关闭任何popover打开的时候any body element(不是popover本身)is focused,

我这样做:

 $(document.body).on('focus focusout focusin', function(e) {
  if( e.target.classList.contains('popover') ){return false;}
  else{
    $('*').popover('hide');
  }
  // code to close the popover
});

在弹出窗口关闭之前,我需要这个,Chrome但是效果不错.FFFFfocusin and focusout

这是我的例子只适用于chrome:http://jsfiddle.net/CU5U5/4/

我怎样才能解决这个问题？

Answer 1

替代:

$(document).on('focus', ':not(.popover)', function(){
    $('.popover').popover('hide');
});

编辑:

事实证明,我的上述答案是错误的.你需要在弹出窗口实例化的元素上调用.popover('hide')而不是.popover本身.并且您需要停止在链接上传播click事件(即,在单击处理程序中返回false),这样它就不会冒泡到文档根目录.请参阅此答案,http://jsfiddle.net/aFacG/1/.

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a>

JS

$(document).ready(function(){
  $("#mypopover").popover();

  $(document).on('click', function(){
      $("#mypopover").popover('hide');
  });

  $('#mypopover').click(function(){
      return false;
  });
});

Answer 2

当前接受的答案的问题是,即使您在工具提示中单击,弹出也会隐藏(如果您想要在弹出窗口内部进行交互,则会出现错误...就像输入字段一样).

在弹出框容器上使用stopPropagation方法可以防止hide事件冒泡DOM.

更新(引导网址已更改):http://jsfiddle.net/bNvX7/10/

$(document).ready(function(){

    //Initialize popover on element
    $("#mypopover").popover();

    //Attach click handler to document
    $(document).bind('click', function (e) {
        $("#mypopover").popover('hide');
    });

    //Dont hide when I click anything inside #container
    $('#container').bind('click', function(e) {
        e.stopPropagation();
    });
});

Answer 3

非常简单：

$('.popover').remove();