javascript - 关闭所有通过委托(delegate)创建的打开的 Bootstrap 弹出窗口

Question

我有一个 Bootstrap Popovers 场景(2.3 版，尽管我也可以在 3 版中重新创建该问题)，页面上有多个弹出框，并且我希望能够在打开新弹出框时关闭所有打开的弹出框。

我用来关闭打开的弹出窗口的方法(取自 here )工作正常，直到我使用委托(delegate)弹出窗口对象的 selector 选项初始化弹出窗口。

这是 JS:

// Works if popovers are instantiated this way
//$("[data-toggle=popover]").popover();

// Doesn't work if popovers are instantiated this way
var options = { selector: '[data-toggle=popover]' };

$(".container").popover(options)

$("[data-toggle=popover]").click(function() {
    $("[data-toggle=popover]").not(this).popover('hide');
});

和 HTML:

<div class="container">
    <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</a>
    <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</a>
</div>

Bootply example

我花了一些时间挖掘源代码，我发现问题可能是什么，但我不确定如何解决这个问题。以前有人做过类似的工作吗？

更新:

这确实有效 - $("[data-toggle=popover]").filter(this).popover('show'); - 我唯一关心的是来自弹出库:

function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.popover')
      var options = typeof option == 'object' && option

      if (!data && option == 'destroy') return
      if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

线路

if (!data) $this.data('bs.popover', (data = new Popover(this, options)))

当弹出窗口最初使用selector选项初始化时，向.container添加一个数据属性，但是当

$("[data-toggle=popover]").not(this).popover('隐藏');

被称为它循环遍历与 $("[data-toggle=popover]") 选择器匹配的每个元素，并在它找到的每个元素上重新初始化弹出框，忽略了弹出窗口对象已添加到父容器中，并使用选择器选项通过委托(delegate)设置为工作。有什么办法可以避免这种情况吗？

Answer 1

在我看来，最简单且最好的方法是使用 <button>而不是<a>然后使用focus触发器。

var options = { selector: '[data-toggle=popover]', trigger: 'focus' };

$(".container").popover(options);



<div class="container">
    <button class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</button>
    <button class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</button>
</div>

这是一个bootply

如果您不想/无法更改 anchor ，您可以尝试:

var options = { selector: '[data-toggle=popover]' };

$("body").popover(options)

$("[data-toggle=popover]").on('shown.bs.popover', function(e) {
  $(this).addClass('shown');
});

$("body").on('click', '[data-toggle=popover]', function(e) {
   $('.shown').not(this).popover('hide').removeClass('shown');
});

这是另一个 bootply .