jQuery - Twitter Bootstrap - zamknij wszystkie popovers na ciele jakieś elementy skupić

Question

próbuję zamykania wszelkich popover jest otwarty, gdy any body element (nie sam popover) is focused,

tak zrobić:

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

działa to znakomicie na Chrome, ale nie na FF, na FF muszę focusin and focusout przed zamknięciem okna popover.

tutaj jest mój przykład działa tylko na chrome: http://jsfiddle.net/CU5U5/4/

Jak mogę rozwiązać ten problem?

Answer 1

Alternatywą:

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

Edit:

Więc jak się okazuje, moja powyższa odpowiedź jest błędna. Musisz wywołać funkcję .popover ("ukryj") na elemencie, w którym utworzono popover ... nie samym .popover. ORAZ należy zatrzymać propagację zdarzenia kliknięcia w łączu (tj. Zwrócić wartość false w module obsługi kliknięcia), aby nie pojawił się dymek w katalogu głównym dokumentu. Zobacz tę odpowiedź, 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

Problem z obecnym odpowiedź przyjętym jest, że popover ukrywa nawet po kliknięciu wewnątrz podpowiedzi (zły jeśli element chcesz interakcji z wewnątrz popover .. podobnie jak pole wejściowe).

Użyj metody stopPropagation na swoim popover container, aby zapobiec efektowi "hide" w DOM.

UPDATE (bootstrap url zmianie): 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

Oto nieco bardziej ogólne podejście, które wymaga tylko jednego programu obsługi i działa dla wszystkich popovers gdzie przełącznik/link zawiera atrybut data-rel = "popover" np:

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

Może spróbuj tak:

 // 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"); 
       } 
      }); 
     }); 

Nie najlepsze praktyki, ale to działa dobrze zarówno Chrome i FF.

Answer 5

Będąc bardzo uproszczone:

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