Bootstrap3 popover data-trigger =ポップアップ内で<select>入力をクリックするとフォーカスが閉じるポップアップ

Question

私はブートストラップポップオーバーを使用しており、ユーザーが言語を変更できるようにポップオーバーの内側に<select>フィールドを持っています。

ポップオーバーの外側をクリックすると消えてしまいますので、これを達成するために<a>タグ内のdata-trigger="focus"属性を使用しています。

しかし、<select>ドロップダウンメニューをクリックすると、言語をクリックする前にポップオーバーが消えます。

以下は参照用のブーツです。どんな助けでも大歓迎です。

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

私はあなたが属性データ・トリガーを誤用と信じて、あなたはクリックを指定している必要があり、焦点を当てていません。

ここでそれが働いている：http://www.bootply.com/5gXiitMup1

を私は言語が選択されるたびにポップオーバーの閉鎖を処理するコードを追加しました。

希望します。

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'); 
     } 
    }); 
}); 

あなたは、単に身体上のイベントをクリックして、ターゲットがあなたのポップオーバーの子であるかどうかを確認キャッチ。しかし、これは本当に遅いです。