Bootstrap3 popover data-trigger = popup di chiusura del focus quando si fa clic su <select> input all'interno della finestra popup

Question

Sto usando un popover bootstrap e ho un campo <select> all'interno del popover in modo che l'utente possa cambiare la lingua.

Se fanno clic fuori dal popover, voglio che scompaia, quindi sto usando l'attributo data-trigger="focus" all'interno del tag <a> per farlo.

Tuttavia, se fanno clic sul menu a discesa <select>, il popover scompare prima che possano fare clic su una lingua.

Di seguito è riportato un bootply per il vostro riferimento - qualsiasi aiuto è molto apprezzato.

http://www.bootply.com/SEM4ophIhx

Javascript:

$(function() { 
    $('[data-toggle="popover"]').popover() 
}) 

$(function() { 
    $('[rel="popover"]').popover({ 
     container: 'body', 
     html: true, 
     content: function() { 
      var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); 
      return clone; 
     } 
    }).click(function (e) { 
     e.preventDefault(); 
    }); 
}); 

HTML:

<a href="#" role="button" data-placement="right" data-trigger="focus" rel="popover" data-popover-content="#profilesettingsaction"> 
<span class="glyphicon glyphicon-cog"></span> 
</a> 
    <div id="profilesettingsaction" class="hide">        
     <ul> 
     <li> 
      <select name="language"> 
      <option value="">العربية: الإمارات العربية المتحدة</option> 
      <option value="">中国</option> 
      <option value="">中國</option> 
      <option value="">Nederlands: Nederland</option> 
      <option value="">English: United Kingdom</option> 
      <option value="" selected="">Language: English</option> 
      <option value="">Français: France</option> 
      <option value="">Italiano: l'Italia</option> 
      <option value="">日本語：日本</option> 
      <option value="">Português: Portugal</option> 
      <option value="">Español: México</option> 
      </select> 
     </li> 
     </ul>         
    </div> 

Answer 1

Credo che avete fatto cattivo uso l'attributo data-trigger, si dovrebbe avere specificato click, si concentra.

Qui si sta lavorando: http://www.bootply.com/5gXiitMup1

ho aggiunto il codice per gestire la chiusura popover ogni volta che si seleziona una lingua.

Spero che sia utile.

Answer 2

Found a way to do this

$('[data-toggle="popover"]').popover(); 

$('body').on('click', function (e) { 
    $('[data-toggle="popover"]').each(function() { 
     //the 'is' for buttons that trigger popups 
     //the 'has' for icons within a button that triggers a popup 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); 
     } 
    }); 
}); 

È sufficiente prendere cliccare eventi sul corpo e verificare se il bersaglio è un figlio del vostro popover. Comunque questo è veramente lento.