Bootstrap Modal关闭后执行函数 Bootstrap如何监听模态框的hidden事件

应使用 hidden.bs.modal 事件监听 Modal 关闭动画结束后执行清理逻辑，此时 display: none 已生效、DOM 已完全隐藏；hide.bs.modal 在动画开始前触发，DOM 仍可见，易导致操作失败。

Modal关闭后执行函数：用hidden.bs.modal事件监听

bootstrap 5 的 modal 关闭动画结束后会触发 hidden.bs.modal，这才是执行清理逻辑、重置表单或发起请求的正确时机。别用 hide.bs.modal——它在动画开始前就触发，dom 还没隐藏，dom 操作可能失败。

• hidden.bs.modal 是唯一能确保 Modal 已完全关闭、display: none 已生效的钩子
• 如果 Modal 是通过 JS 手动调用 modal.hide() 关闭的，该事件仍会正常触发
• 注意：事件对象的 relatedTarget 属性只在点击「关闭按钮」「遮罩层」或「ESC」时有值，程序调用关闭时为 null

监听写法：推荐用 addEventListener 而非 jQuery

Bootstrap 5 已移除 jQuery 依赖，原生 DOM 方式更轻量、兼容性更好，也避免混用导致的事件重复绑定问题。

• 必须在 Modal 元素存在后再绑定事件，否则监听无效；常见做法是放在 DOMContentLoaded 或 Modal 初始化之后
• 不要在每次打开 Modal 前重复绑定——会导致多次执行；建议只绑一次，或用 once: true（但通常需要复用，所以不推荐）
• 示例：

  const myModal = document.getElementById('myModal');  
  myModal.addEventListener('hidden.bs.modal', function () {  
    console.log('Modal 已彻底关闭');  
    // 在这里重置表单、清空输入框、释放资源  
  });

常见错误：把 hidden.bs.modal 和 hide.bs.modal 搞混

这两个事件名字太像，但行为和适用场景完全不同，踩坑最多。

Jamboss

Jamboss是一款简单的AI音乐生成App，可以一键生成歌曲。

下载

• hide.bs.modal：用户点击关闭按钮/ESC/遮罩层后、动画**刚开始前**触发，此时 Modal 还可见，offsetHeight 仍大于 0
• hidden.bs.modal：动画**完全结束**、display: none 已设置、元素已从视觉和布局中移除后触发
• 典型误用：在 hide.bs.modal 里调用 reset() 表单方法，结果因 DOM 尚未隐藏导致样式闪动或校验残留
• 调试技巧：在两个事件回调里都打 console.log(modal.offsetHeight)，对比数值差异

兼容性注意：Bootstrap 4 和 5 的事件名一致，但初始化方式不同

如果你项目还在用 Bootstrap 4，事件名也是 hidden.bs.modal，但 Modal 实例化方式不同——这点容易被忽略，尤其在升级过程中。

• Bootstrap 4 需要先用 new bootstrap.Modal(...) 创建实例再调用 show()/hide()；而 Bootstrap 5 可直接操作 DOM 元素
• 事件监听本身写法一致，但若你在 BS4 中用 $().on('hidden.bs.modal', ...)，升级到 BS5 后必须改用原生 addEventListener
• 检查是否加载了旧版 Bootstrap JS 文件：控制台运行 typeof bootstrap，返回 "object" 才是 BS5；BS4 返回 "undefined"（依赖 jQuery）