Bootstrap v4 popover隐藏事件答案

【问题标题】：Bootstrap v4 popover hidden eventsBootstrap v4 popover隐藏事件
【发布时间】：2017-03-25 19:45:56
【问题描述】：

我有一个引导弹出框，到目前为止一切正常。

但是我遇到了麻烦事件。 show.bs.popover 和 shown.bs.popover 事件按预期工作，但 hide 和 hidden 事件似乎没有触发。

$('#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
});

我想念某个地方的理解。也许隐藏的代码需要稍后运行。调用此函数时，可能不存在弹出框。

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

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

但这似乎也不起作用。

任何建议都会很棒！

【问题讨论】：

标签： javascript jquery twitter-bootstrap events popover

【解决方案1】：

看看这个 sn-p，它工作得很好。请确保您单击了两次按钮以获取警报框。

$('#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>

【讨论】：

谢谢。这确实有效，唯一的区别在于您使用 data 属性调用它的方式。我不确定为什么它不能以编程方式工作。
我已经删除了所有数据属性，但它仍然有效。还要检查对我包含在 sn-p 中的库的 js 文件的引用。也许你有不同的版本或者其中一些丢失了

【解决方案2】：

所以我发现的问题是，当您使用 JavaScript 以编程方式显示弹出框然后使用“处理”删除它时，“隐藏”和“隐藏”事件永远不会触发，尽管在引导文档中它说'dispose' 函数“隐藏和销毁弹出框。”

【讨论】：