如何只允许单个 bootstrap 弹出元素

Question

我在我的项目中使用 fullCalendar in conjunction with bootstrap popovers。 ajax 请求用于将信息拉入弹出框 window。当显示许多事件时，如果用户将鼠标快速移动到事件列表上，弹出元素会出现但不会被清除。如果鼠标移动得更慢，一切都会按预期工作，弹出窗口在悬停时出现但在悬停时消失。

经过一些测试，我认为问题的发生是因为 ajax 事件引入了延迟以拉取弹出信息。我在 js fiddle here 中模拟了这种行为，使用 javascript setTimeout() 来模拟 ajax 延迟。这是代码的简化版本：

$('td.test').hover(
  function() {
    let e = $(this);

    e.off('hover');

    // use setTimeout to simulate ajax request for popover content
    setTimeout(function() {
      e.popover({
        title: "Title",
        content: "<h1>Heading</h1><div>Some content</div>",
        placement: 'bottom',
        html: true,
        boundary: 'viewport',
        container: 'body',
        sanitize: true,
        appendToBody: true,
      }).popover('show');
    }, 100);
  },
  function() {
    $(this).popover('hide');
  }
);

<div>
  <table>
   <tr>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
    <tr>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
    </tr>
    <tr>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
    </tr>
    <tr>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
      <td class="test">Lorum ipsum</td>
    </tr>
  </table>
</div>

我想一次只允许出现一个弹出窗口。我尝试在 ajax 请求之前和之后添加类似 $('.test').popover('hide'); 的内容，但这无济于事（可能是因为 ajax 函数太慢了，所以弹出窗口添加了一个新的悬停发生在上一个弹出框完成之前。

Answer 1

我能够解决这个问题，所以在这里发帖给遇到这个问题的其他人。

由于 popover() 函数将带有 class popover 的 div 添加到 DOM，我只是将该元素隐藏在 [=14= 中] 部分 ajax 在创建和显示新弹出框之前调用。这是我用 ajax 调用更新后的 hover()：

$(info.el).hover(
    function() {
        let e = $(this);
        e.off('hover');
        $.ajax({
            url: "/path/to/my/backend",
        }).done(function(data) {
            // these lines hide all previous popovers
            $('.popover').each(function() {
                $(this).popover('hide');
            });

            e.popover({
                title: "Title",
                content: data,
                placement: 'bottom',
                html: true,
                boundary: 'viewport',
                container: 'body',
                sanitize: true,
                appendToBody: true,
            }).popover('show')
        });
    },
    function() {
        $(this).popover('hide');
    }
);

如何只允许单个 bootstrap 弹出元素

How allow only single bootstrap popover element

javascript

jquery

fullcalendar