Question

我有多个弹出框，它们放在jquery数据表的不同单元格中。

//popover needs to be triggered onclick on this i element
<i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" ></i>
//this is hidden by css
<div class="popover-content hidden"><div>Popover text</div></div>

Popover初始化：

$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
  $(this).popover({
    html: true,
    content: function () {
            return $(this).next().html();
        },
    title: "Comment",
    trigger: "manual"
    });
});

我希望popover具有所有trigger: "click"功能，但可以通过单击OUTSIDE popover元素区域（popover区域=弹出框本身或提到的i元素）来解除。我已经应用了我在How to dismiss a Twitter Bootstrap popover by clicking outside?

找到的解决方案

看起来像那样。 SHOW popover的功能：

$('#MyDataTable').on('click', '.popoverIcon', function (event) {
    //if popover closed - open it
    if (!popoverOpen) {
        $(this).popover('toggle');
        popoverOpen = true;
    }
});

HIDE popover的功能：

 $(document).on('click', function (e) {
  if (popoverOpen && !mouseOnPopoverArea) {
        $('[data-toggle="popover"]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
        popoverOpen = false;
    }
});

奇怪的是，它完美无缺，但只有我打开的第一个弹出窗口。当我尝试打开第二，第三，第四（......）时，没有任何事情发生。当我回到我点击的第一个时，它再次起作用。可能是什么事？

Answer 1

$('#MyDataTable').on('click', '.popoverIcon', function (event) {
    //if popover closed - open it
    if (!popoverOpen) {
        $(this).popover('toggle');
        popoverOpen = true;
    }
});

在这里你只在一个id上调用click事件，所以尝试分配不同的id和相应的点击事件

Answer 2

尝试通过首先使用parent（）到$ this定位它的父元素然后使用find（）

找到其中的pop over元素来访问pop。

页面上有多个引导程序弹出窗口，但只有第一个单击的按钮可以按需运行

2 个答案: