引导模式事件未触发

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

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

Answer 4

使用 React 更新 2024 Bootstrap 5

我们可以使用

useEffect

来监听关闭、打开模态事件

  useEffect(() => {
    document
      .getElementById("login-modal")
      .addEventListener("hidden.bs.modal", function (event) {
        console.log("close ok");
      });
  }, []);