Question

我有一个引导程序弹出窗口，到目前为止一切正常。

但是我遇到了麻烦。 show.bs.popover和shown.bs.popover事件按预期工作，但隐藏和隐藏事件似乎不会触发。

$('#element').popover({ >options here< })
.popover('show')
.on('show.bs.popover', function() {
...
})
.on('shown.bs.popover', function() {
...
})
.on('hidden.bs.popover', function() {
alert('hidden'); //NOT WORKING
});

我想念某处。也许隐藏的代码需要稍后运行。调用此函数时，可能不存在popover。

所以我也尝试获取popover id并像这样调用它......

$('#popover_id').on('hidden.bs.popover', function() {
alert('hidden'); //NOT WORKING
});

但这似乎也无效。

任何建议都会很棒!!

Answer 1

看看这个片段，它运作正常。确保您单击该按钮两次以获取警告框。

$('#element').popover({ placement: 'bottom', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.' })
  .popover('show')
  .on('show.bs.popover', function() {
  })
  .on('shown.bs.popover', function() {
  })
  .on('hidden.bs.popover', function() {
    alert('hidden');
  });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<button id="element" type="button" class="btn btn-secondary">
  Popover on bottom
</button>

Answer 2

所以我发现的问题是当你以编程方式使用JavaScript显示一个popover然后使用＆＃39; dispose＆＃39;删除它，隐藏＆＃39;并且隐藏了＆＃39;事件永远不会被解雇，尽管在引导程序文档中它说的是“处理”事件。功能＆＃34;隐藏和销毁一个弹出窗口。＆＃34;

Bootstrap v4 popover隐藏事件

2 个答案: