jQuery - Twitter Bootstrap - chiudere tutte le popovers sul corpo tutti gli elementi si concentrano

Question

sto cercando di chiudere qualsiasi popover si apre quando any body element (non il popover stesso) is focused,

così faccio:

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

questo funziona benissimo su Chrome ma non su FF, su FF ho bisogno di focusin and focusout prima che il popover sia chiuso.

Ecco il mio esempio di lavoro solo per Chrome: http://jsfiddle.net/CU5U5/4/

Come posso risolvere questo problema?

Answer 1

Un'alternativa:

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

Edit:

Quindi, come si è visto, la mia risposta sopra non è corretto. Devi chiamare .popover ('nascondi') sull'elemento sul quale è stato istanziato il popover ... non lo stesso .popover. E è necessario interrompere la propagazione dell'evento click sul link (ad esempio, restituire false nel gestore di clic) in modo che non diventi un problema con la radice del documento. Vedi questo per una risposta, 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

Il problema con la risposta accettata attuale è che popover nasconde anche quando si fa clic all'interno del tooltip (male se si dispone di un elemento che si desidera interagire con all'interno del popover..come un campo di input).

Utilizzare il metodo stopPropagation sul contenitore popover per impedire che l'evento hide esploda sul DOM.

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

Ecco un approccio leggermente più generico che richiede un solo conduttore e funziona per tutti i popovers in cui l'interruttore/link contiene attributo data-rel = "popover", ad esempio:

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

Forse si potrebbe provare questo:

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

Non è la migliore pratica, ma funziona benissimo sia su Chrome e FF.

Answer 5

Essendo molto semplicistica:

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