Bootstrap table 行上的弹出窗口不会关闭，即使 'trigger' 设置为 'focus'

Question

我正在尝试验证一些 table 内容并在包含错误的行旁边显示一个弹出窗口。

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 以避免 table 相关元素的副作用。

我在 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 弹出框不能很好地与 tables 一起使用。我也尝试过他在那里提到的解决方法，但效果不佳。唯一有效的方法是触发 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 table 行上的弹出窗口不会关闭，即使 'trigger' 设置为 'focus'

Bootstrap Popover on table row does not dismiss, even with 'trigger' set to 'focus'

jquery

html

twitter-bootstrap

popover