jquery - 单击 Bootstrap 弹出窗口中的链接

Question

我正在使用 Bootstrap js 弹出窗口来显示带有链接的 html 列表。但是当使用 jquery 选择器单击链接时，我无法获取链接:

弹出框的元素:

<span class="popoverSpan" data-style="listPopovers" data-html="true" data-container="body" data-placement="bottom" data-trigger="focus" data-toggle="popover" tabindex="0" data-original-title="" title="">Menu</span>

<div>
    <ul id="forPopover" class="dropdown-menu popover-content">
        <li id="List_3" class="subgroups">
            <a id="aInner">Students</a>
        </li>
        <li id="" class="subgroups">
            <a id="bInner">Teachers</a>   
        </li>
    </ul>
</div>



$(".popoverSpan").popover({
        html: true,
        content: function () {

            return $('#forPopover').html();
        }
    });


 $('body').on('click', '.subgroups a', function (event) {
       alert('a');
    });

我在上面有 popover html，在它下面有 JQuery 和 Bootstrap 代码。警报('a')是间歇性的。为什么会这样，我该如何解决？谢谢。

Answer 1

OP 有点晚了，但我自己遇到了这个问题(我在使用 Bootstrap v3.2)。问题是 data-trigger="focus"。

如果你看the description in the docs focus 也被描述为“下次点击时关闭”，事实证明它包括对弹出窗口本身的点击，甚至包括对弹出窗口中链接的点击。因此，在使 Bootstrap 关闭弹出窗口的点击与到达链接并实际打开新页面的点击事件之间存在竞争。

我个人认为让 focus 在任何地方但在弹出窗口上的下一次点击时关闭会更直观。

无论如何，我可以看到两种解决方案。第一种是将 data-trigger 设置为手动，然后重新实现 focus 但如果点击在弹出窗口上则不要关闭。

另一个更 hacky，但如果你添加延迟，使用 data-delay="500" 或者最好是 .popover(delay: {show: 0, hide: 500})，然后延迟使点击事件有时间在关闭之前打开页面。后者仅在关闭时延迟，因此由于他们将查看新页面，因此如果您不希望延迟，则延迟不是问题。注意理论上你也应该能够做 data-delay="{show: 0, hide: 500}" 但我无法让它工作。

第二种解决方法快速简单，不需要的延迟应该不是什么大问题，但请注意，在某些条件下(更快/更慢的机器、不同的浏览器、谁知道？)。所以它可能会在 CI 或其他方面失败。您将延迟设置得越高，出现问题的可能性就越小(例如，我尝试了 50 次，但实际上对我来说从来没有用过)，但是您需要处理的延迟很大。