Javascript Bootstrap3 popover data trigger=单击<；时焦点关闭弹出窗口；选择>；在弹出窗口中输入

我使用的是引导式popover，popover中有一个

字段，以便用户更改语言

如果他们在弹出框外单击，我希望它消失，因此我使用

data trigger=“focus”

属性

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:

العربية: الإمارات العربية المتحدة
中国
中國
荷兰：荷兰
中文：联合王国
语言：英语
法国：法国
意大利人：意大利
日本語：日本
葡萄牙：葡萄牙
西班牙人：墨西哥

我相信您误用了属性数据触发器，您应该指定单击，而不是焦点

这就是它的工作原理：

我添加了在选择语言时处理popover关闭的代码

希望它有用

---

您只需捕获身体上的点击事件，并检查目标是否是popover的子对象。但是这真的很慢。

谢谢，这是一个很好的信息，但是我仍然希望用户能够在弹出窗口外单击，让它消失，同时仍然能够从下拉列表中选择语言。当用户单击一种语言时，页面将以任何方式重新加载以显示新副本，从而以任何方式折叠弹出窗口。这家伙也有同样的问题——现在似乎不可能，我尝试了很多方法，但是你可以在JQuery代码中实现类似的东西，并编程你的自定义行为，我很抱歉。谢谢，我也尝试了很多方法，希望我错过了社区以前经历过的一些事情。

<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>

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