'destroy'如果 Bootstrap .popover() 打开('hidden.bs.popover'),则会触发另一个 'hidden.bs.popover' 事件



我想把'destroy'变成.popover(),如果它变成.on('hidden.bs.popover',然后变成.on('shown.bs.popover',这样它就不会再变成'show'了。一切似乎都是正确的,但是看看控制台,事件'hidden.bs.popover'触发了两次,因为破坏一个弹出窗口会触发另一个'hidden.bs.popover',导致破坏被破坏的弹出窗口,看起来这会影响一点性能。

$(function () {
  $('[data-toggle="popover"]').popover()
})
$('[data-toggle="popover"]').on('hidden.bs.popover', function () {
  $(this).popover('destroy');
  console.debug("'hidden.bs.popover' triggering twice!");
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

我试图弄清楚,但我选择不包括它,以避免混淆。在不触发相同事件的情况下销毁已解散的弹出窗口的正确方法是什么?

您可以使用one只绑定一次事件,但我相信它将只适用于第一个弹出窗口,然后它将从所有其他弹出窗口解除绑定事件,但值得给它一个机会:

$('[data-toggle="popover"]').one('hidden.bs.popover', function () {
  $(this).popover('destroy');
  console.debug("'hidden.bs.popover' triggering twice!");
});

测试此代码点击我

 $('.pop').popover();
$('.pop').on('mouseout',function(){
    $(this).popover('hide');
})

最新更新