Question

我正在尝试验证某些表内容，并在每次包含错误时在行旁边显示一个弹出窗口。

Popover是动态创建的，并显示为：

$('table#requests tbody tr')
.eq(1)  // highlight row #1
.popover({
    trigger: 'focus',
    placement: 'right',
    html: 'true',
    title: '<strong>Error!</strong>',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
    container: 'body',
})
.popover('show');

但是，弹出器不能通过在元素外部单击而被解雇，这可以在Bootstrap文档中预期并记录。我确保将trigger设置为focus，将container设置为body，以避免与表格相关的元素产生副作用。

我设法在https://jsfiddle.net/e31dcs4n/2/

重现了这个问题

请注意，删除trigger选项允许单击该行以关闭弹出窗口（默认行为，因为弹出窗口附加到行）。但是，我希望用户能够点击任何地方来删除弹出框。

另请注意，Bootstrap Popover Dismissable is not working中详细说明的调用.focus()无效。

Answer 1

回答你的第一个问题。您可以将点击事件添加到body，其中您可以查看点击是否发生在body之外，并且可以hide popover。

$('body').on('click', function(e) {
  if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
    $('.popover').popover('hide');
  }
});

<强> Here's the DEMO

我不确定是否以正确的方式回答了评论中指定的其他问题。但是根据 post here popover并不适用于表格。我也试过他在那里提到的解决方法，但它没有很好地应对。唯一可行的是触发hover行，你不需要在上面隐藏解决方案。

$(function() {
  $('table#requests tbody tr:eq(1)').popover({
    placement: 'right',
    html: 'true',
    trigger: 'hover',
    title: '<strong>Error!</strong>',
    container: 'body',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
  })
});

Here's a DEMO 表示上述行为。

桌面行上的Bootstrap Popover不会被忽略，即使'trigger'设置为'focus'

1 个答案: