应监听 shown.bs.modal 事件绑定确定按钮点击事件，避免 DOM 未就绪；禁用按钮防重复提交；手动控制模态框关闭时机；销毁后需重绑事件或改用 hide()。
Modal 确定按钮绑定点击事件的正确时机
Bootstrap 的 modal 是异步渲染的，直接在 DOM 加载后用 document.querySelector('#confirmBtn').addEventListener(...) 绑定会失败——因为按钮可能还没被插入文档。必须等模态框真正显示（或至少 DOM 已就绪）再绑定。
推荐监听 shown.bs.modal 事件，它在模态框完全显示、所有元素可交互之后触发：
$('#myModal').on('shown.bs.modal', function () {
$('#confirmBtn').off('click').on('click', function () {
handleConfirm();
});
});-
off('click')防止重复绑定（比如多次打开模态框导致函数执行多遍） - 不要用
show.bs.modal：此时 DOM 可能尚未渲染完成，querySelector仍可能返回null - 如果用原生 JS + Bootstrap 5，监听
shown.bs.modal后再查元素，别忘了getElementById或querySelector要在模态框容器内找，避免全局冲突
Bootstrap 5 中用 data-bs-* 属性触发函数的限制
很多人想直接写 <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="handleConfirm()">确定</button>，但这样有隐患：函数会执行，但模态框不一定关闭——因为 data-bs-dismiss="modal" 和 onclick 是并行触发，而 handleConfirm() 若含异步操作（如 API 调用），模态框可能提前关闭，导致用户看到空白界面或状态不一致。
- 必须手动控制关闭时机：
handleConfirm()内部调用bootstrap.Modal.getInstance(document.getElementById('myModal')).hide()，而不是依赖data-bs-dismiss -
data-bs-dismiss只适合纯同步、无副作用的确认场景（如“我知道了”弹窗） - Bootstrap 5 移除了 jQuery 依赖，
onclick里不能直接调用$方法，需改用bootstrap.Modal实例 API
防止重复提交：禁用按钮 + 恢复逻辑要配对
用户手快连点确定，后端可能收到重复请求。光在函数开头加 if (isSubmitting) return 不够，UI 也要即时反馈。
function handleConfirm() {
const btn = document.getElementById('confirmBtn');
btn.disabled = true;
btn.textContent = '提交中...';
<p>apiCall().then(() => {
// 成功后手动关闭
const modal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
modal.hide();
}).catch(() => {
// 失败后恢复按钮
btn.disabled = false;
btn.textContent = '确定';
});
}- 禁用按钮必须在异步开始前设置，否则仍有竞态风险
- 务必在
.then和.catch里都处理按钮状态，否则失败后按钮永远卡住 - 不要用
btn.setAttribute('disabled', '')：原生属性操作和btn.disabled = true行为不完全等价，后者更可靠
销毁后重新初始化模态框的坑
如果模态框内容是动态生成的（比如从模板填充数据），且你调用了 modal.dispose()，之后再用 new bootstrap.Modal(...) 重建，之前绑定的 shown.bs.modal 监听器不会自动恢复。
- 每次新建 Modal 实例后，都要重新绑定
shown.bs.modal事件 - 或者改用「隐藏不销毁」策略：用
modal.hide()替代dispose()，并在下次show()前清理内容（如清空表单、重置变量） - 若必须销毁，建议封装一个
initModal()函数，把事件绑定、按钮绑定、数据加载全包进去，每次重建后显式调用
实际项目里最常出问题的不是函数写不对，而是模态框生命周期和事件时机没对齐——尤其是多次打开、带表单、含异步的场景，DOM 存在性、按钮状态、关闭时机这三者稍一错位，就会出现点不动、点两下、关不掉、重复提交。
