Bootstrap模态事件未触发

Question

我想在我的模态被解雇后做一些逻辑。

在模态中我有一个按钮：

<button type="button" class="btn btn-primary" onclick="$('#mymodal').modal('hide');">Save changes</button>

在视图中，我等待事件被解雇，但它永远不会。

 $('#mymodal').on('hide.bs.modal', function (e) {
       alert('event fired')
});

我试图在chrome dev工具中放置断点，事件仅在视图的第一次加载时被击中。之后，再也不会达到断点。我做错了吗？

顺便说一句，模态隐藏了我想要的方式。

Answer 1

试试这个，

$(function(){ // let all dom elements are loaded
    $('#mymodal').on('hide.bs.modal', function (e) {
        alert('event fired')
    });
});

Working Demo

Answer 2

虽然接受的答案是正确的，但我有一个略有不同的方案，但找不到答案。

我正在动态创建模式，所以页面加载时不存在它们。我使用JQuery .append('body')将它们添加到DOM中。因此

$('#mymodal').on('hide.bs.modal', function(e) {

不起作用...。我不得不将事件监听器更改为

$(document).on('hide.bs.modal', '#mymodal', function(e) {

上班。希望这会帮助和我一样的人。

Answer 3

确保页面中确实包含Bootstrap Javascript库。那是我的问题。 Bootstrap文档对此进行了提示，但是在代码示例中忽略了它。

这里是文件/ CDN，因为它们的站点由于某些原因避免从大多数相关页面链接它：https://getbootstrap.com/docs/4.1/getting-started/download/