jQuery的 - Twitter的引導 - 關閉在身體的任何元素都popovers重點

Question

我試圖關閉所有popover打開時any body element（不酥料餅本身）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很好，但不是在FF，在FF我需要focusin and focusout popover關閉之前。

這裏工作只對鉻我的例子：http://jsfiddle.net/CU5U5/4/

我怎麼能解決這個問題？

Answer 1

一種替代方案：

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

編輯：

所以事實證明，我上面的回答不正確。你需要對彈出窗口實例化的元素（不包括.popover本身）調用.popover（'隱藏'）。並且您需要停止鏈接上click事件的傳播（即，在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

與目前公認的答案的問題是，當你點擊提示中的是酥料餅隱藏即使（壞的，如果你有一個元素要與互動裏面的popover..like輸入字段）。

在彈出容器中使用stopPropagation方法可防止hide事件冒泡DOM。

UPDATE（引導程序網址變更）：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

這裏有一個稍微更通用的方法是隻需要一個處理程序，並適用於在切換/鏈接中包含的屬性數據的rel =「酥料餅」的所有popovers，例如：

HTML

<a href="#" data-rel="popover">toggle</a> 

JS

$(document).on('click', function(event) { 
    var $clicked = $(event.target); 

    if ($clicked.closest('[data-rel="popover"]').length) { 
     return; 
    } else if ($clicked.closest('.popover').length) { 
     event.stopPropagation(); 
    } else { 
     $('[data-rel="popover"]').popover('hide'); 
    } 
    }); 

Answer 4

也許你可以試試這個：

 // Part 1: initialize the popver 
     var button = template.find(".itemInfo button"); 
     // add a class name to identify the target later. 
     button.addClass("popover-toggle"); 

     var content = $("<div>test</div>"); 

     button.popover({ 
      container:"body", 
      content: content, 
      html:true, 
      placement:"top", 
      title:"Popover title", 
      trigger:'click' 
     }); 

     // Part 2: add click event listener 
     $(document).on("click", function(event){ 
      var target = $(event.target); 
      $.each($(".popover-toggle"), function(index, value){ 
       var _target = $(value); 
       // not click on the button and not click on the popover it self 
       if(!target.is(_target) && target.closest(".popover").length == 0){ 
        _target.popover("hide"); 
       } 
      }); 
     }); 

不是最好的做法，但它工作正常在Chrome和FF。

Answer 5

我們是很簡單的：

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