Question

我在项目中将fullCalendar与bootstrap popovers结合使用。 Ajax请求用于将信息拉入弹出窗口。当显示许多事件时，如果用户快速将鼠标移到事件列表上，则会显示popover元素，但不会清除。如果鼠标移动得更慢，则弹出窗口在悬停时出现但在悬停时消失的情况下，一切都会按预期进行。

经过一些测试，我认为问题是由于ajax事件引入延迟来提取弹出信息而发生的。我已经使用JavaScript setTimeout()在js小提琴here中模拟了此行为，以模拟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()函数向DOM添加了一个div类的popover，因此我只在创建和创建Ajax调用的done()部分中隐藏该元素。显示新的弹出框。这是我用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');
    }
);

如何仅允许单个引导程序弹出框元素

1 个答案: