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 开发工具中放置断点，该事件仅在视图的第一次加载时命中。之后再也不会到达断点。我做错了什么吗？

顺便说一句，模态隐藏方式如我所愿。

Answer 1

在您看来，您需要添加 dom 就绪函数并在其中编写您的代码，

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

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 文档暗示了这一点，但他们从代码示例中省略了它。

这是它的 files/CDNs，因为他们的网站出于某种原因避免从大多数相关页面链接它：https://getbootstrap.com/docs/4.1/getting-started/download/

Bootstrap modal event not fired