Question

我正在使用Bootstrap js popovers来显示带链接的html列表。但是当用jquery选择器点击链接时，我无法抓取链接：

popover的元素：

<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代码。警报（＆＃39; a＆＃39;）是间歇性的。为什么会这样，我该如何解决？谢谢。

Answer 1

对于OP来说有点晚了，但我自己也遇到了这个问题（我在Bootstrap v3.2上）。问题是data-trigger="focus"。

如果您查看the description in the docs focus也被称为“下次点击时解除”，结果包括点击弹出窗口本身甚至点击弹出窗口中的链接。因此，点击制作引导程序会解除弹出窗口和点击事件到达链接并实际打开新页面之间存在竞争。

就我个人而言，我认为在下一次点击时点击focus会忽略弹出窗口上的但会更直观。

无论如何，我可以看到两种解决方案。第一种是将data-trigger设置为手动，然后重新实现focus，但如果点击位于弹出框中，则不要忽略。

另一个更加hacky，但如果你添加data-delay="500"或最好是.popover(delay: {show: 0, hide: 500})的延迟，那么延迟会给点击事件时间以便在解雇之前打开页面。后者仅在收盘时延迟，因为如果您不想要它，他们将会看到新页面，延迟不是问题。注：从理论上讲，你也应该能够做data-delay="{show: 0, hide: 500}"，但我无法让它发挥作用。

第二种解决方法既快速又简单，不必要的延迟不应该太大，但要注意在某些条件下间歇性地遇到计时问题（更快/更慢的机器，差异浏览器，谁知道？）。所以它可能在CI或其他方面失败。你做出延迟的时间越长，出现问题的可能性就越小（例如我试过50而且它几乎从来没有对我有用）但是你有一个很大的延迟来处理。

单击Bootstrap popover中的链接

1 个答案: