Bootstrap3 popover data-trigger=focus 在弹出窗口中单击 <select> 输入时关闭弹出窗口

Question

我正在使用 bootstrap 弹出框，并且在弹出框内有一个 <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

我相信你误用了属性 data-trigger，你应该指定点击，而不是焦点。

它正在运行：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');
        }
    });
});

您只需捕获正文上的点击事件并检查目标是否是您的弹出窗口的子项。然而这真的很慢。

Bootstrap3 popover data-trigger=focus 在弹出窗口中单击 <select> 输入时关闭弹出窗口

Bootstrap3 popover data-trigger=focus closing popup when clicking on <select> input within popup

javascript

twitter-bootstrap

popover