modal('hide') 后事件不触发，主因是混淆 hide.bs.modal（可取消）与 hidden.bs.modal（关闭完成），或事件绑定过早、未委托、未解绑；vue/react 中应避免混用 jquery，改用 es module 导入并手动管理生命周期。
modal('hide') 调用后事件不触发？检查是否用了 hide 而非 hidden
bootstrap 的 modal 关闭事件分两个阶段：hide.bs.modal（关闭开始前，可取消）、hidden.bs.modal（dom 已移除，不可逆）。很多人监听了 hide 却在代码里手动调用 modal('hide')，结果发现没反应——其实是事件名写错了，或者绑早了。
实操建议：
- 优先监听
hidden.bs.modal，它更符合“关闭完成”的直觉，且不会被阻止 - 确保事件绑定发生在 modal 元素已存在 DOM 中，比如放在
$(document).ready()里，或 modal 初始化之后 - 如果 modal 是动态插入的（如 AJAX 加载），要用事件委托：
$(document).on('hidden.bs.modal', '#myModal', handler) -
hide.bs.modal的 event 对象有event.preventDefault()，可用于拦截关闭；但多数业务场景不需要拦截，硬拦反而容易导致状态不一致
Vue/React 项目里 Modal 关闭监听失效？别直接操作 jQuery 实例
在 Vue 或 React 中混用 Bootstrap JS（尤其是通过 $().modal() 控制），常出现事件监听丢失。根本原因是框架接管了 DOM 生命周期，而 jQuery 插件不知道组件已卸载，导致回调函数引用失效或重复绑定。
实操建议：
- 避免在组件
mounted/useEffect里反复调用$('#modal').modal(...)初始化；改用一次初始化 + 显式show()/hide() - 监听事件时，务必在组件销毁前解绑：
$('#modal').off('hidden.bs.modal', handler)（VuebeforeUnmount，ReactuseEffect cleanup） - 更稳妥的做法是放弃 jQuery 版本，改用官方推荐的 Bootstrap 5+ 的 ES module 导入：
import { Modal } from 'bootstrap'，再用modal.hide()和modal.addEventListener('hidden.bs.modal', ...)
点击 backdrop 或 ESC 关闭后，表单数据丢了？检查事件触发时机和 this 指向
常见现象：用户填完表单，点遮罩层或按 ESC 关闭 modal，监听函数执行了，但 this 指向丢失，或取不到当前表单元素的值。本质是事件回调中上下文未绑定，或 DOM 已被移除导致 querySelector 失败。
实操建议：
- 监听
hidden.bs.modal时，立刻读取表单值，不要延迟（比如用setTimeout）；因为 modal 的display: none和 DOM 移除是同步发生的 - 避免在回调里直接用
$(this)，改用事件对象的event.target：$(event.target).find('input').val() - 如果 modal 内容是动态渲染的（如 Handlebars、Vue slot），确保表单字段在
hidden触发前仍存在于 DOM 中；否则考虑把数据暂存到 closure 或组件 data 中
Bootstrap 5 和 4 的事件名一样，但初始化方式变了——别漏掉 data-bs-* 属性
Bootstrap 5 移除了 jQuery 依赖，事件名保留兼容（hidden.bs.modal 依然有效），但如果你用 HTML 初始化（data-bs-toggle="modal"），必须确保属性名带 bs- 前缀。写成 data-toggle 就不会触发任何事件。
实操建议：
- 检查 modal 触发按钮的属性：
data-bs-toggle="modal"、data-bs-target="#id"，不是data-toggle - JS 初始化时，Bootstrap 5 要用
new Modal(document.getElementById('myModal'))，不能用$('#myModal').modal() - 自定义事件监听必须在 Modal 实例创建之后，且使用原生
addEventListener：modalEl.addEventListener('hidden.bs.modal', handler)
真正容易被忽略的是 modal 的「销毁时机」：Bootstrap 5 默认不自动移除 DOM，只是隐藏；而 4 默认会移除。如果你依赖 DOM 是否存在来判断状态，得先查文档确认版本行为，再决定是监听 hidden 还是 dispose 后的手动清理。
