jQuery - Twitter Bootstrap - ferme tous les popovers sur les éléments du corps

Je suis en train de clôturer tout popover est ouvert lorsque any body element (pas la liste elle-même) is focused,

donc je ne:

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

cela fonctionne très bien sur Chrome mais pas sur FFsur FF j'ai besoin de focusin and focusout avant la liste est fermée.

voici mon exemple de travail uniquement pour chrome: http://jsfiddle.net/CU5U5/4/

Comment puis-je résoudre ce problème?

source d'informationauteur sbaaaang

  1. 24

    Une alternative:

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

    Edit:

    Donc comme il s'avère, ma réponse ci-dessus est incorrecte. Vous devez appeler .liste('hide') sur l'élément de la liste a été instancié... pas la .liste elle-même. ET vous avez besoin d'arrêter la propagation de l'événement de clic sur le lien (c'est à dire, retourne la valeur false dans le gestionnaire de clic) afin de ne pas remonter jusqu'à la racine du document. Voir cette réponse, 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;
  });
});
  2. 8

    Le problème avec l'actuel accepté réponse est que la liste se cache même lorsque vous cliquez à l'intérieur de la bulle d'aide (mauvais si vous avez un élément que vous souhaitez interagir avec l'intérieur de la liste..comme un champ de saisie).

    Utiliser le stopPropagation méthode sur votre liste récipient pour éviter que l'événement masquer de remonter le DOM.

    Mise à JOUR(bootstrap url changé):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();
    });
});
  3. 3

    Être très simpliste:

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

    Voici un peu plus à l'approche générique qui nécessite juste un gestionnaire et fonctionne pour tous les popovers où la bascule/lien contient l'attribut data-, par exemple:

    HTML

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

    JS

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

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

    Peut-être que vous pourriez essayer ceci:

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

    Pas la meilleure pratique, mais il fonctionne très bien sur Chrome et FF.