Bootstrap模态框传参与动态加载本质分离：data-bs-*属性传参解决“显示哪条数据”，load()等方法动态加载解决“内容按需取”。务必在shown.bs.modal中操作DOM，仅对.modal-body调用load()，避免破坏模态框结构。
Bootstrap模态框传参和动态加载内容，本质是两件事：传参解决「我要显示哪条数据」，动态加载解决「内容不预先写死、按需取」。两者常一起用，但混淆容易导致 undefined、重复请求、或第二次点不开模态框。
data-bs-* 属性传参最稳，别用内联 onclick
把参数（如 id、title）直接写在触发按钮上，用 data-bs-* 命名，是最轻量也最可靠的方式。内联 onclick="func(id)" 容易破坏事件委托，且 this 指向错，后续动态插入的按钮根本绑不上。
- 按钮写法：
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" data-bs-id="123" data-bs-name="张三">编辑</button> - 在
show.bs.modal里取值：var id = event.relatedTarget.dataset.bsId;（注意驼峰转小写连字符） - 别手动调
.modal('show')—— Bootstrap 5.3 会自动触发show.bs.modal，自己再调一次可能触发两次事件
用 load() 加载远程 HTML 片段，别用 AJAX + innerHTML
load() 是 jQuery 提供的专用方法，它会自动处理脚本执行、编码、错误回调，比手写 $.get() + .html() 更安全，尤其适合加载含表单、按钮、Vue/React 小组件的片段。
- 确保目标容器是
.modal-body：$('#userModal .modal-body').load('/users/edit?id=' + id); - URL 中带参数时，后端必须返回纯 HTML 片段（不含
<html>、<body>），否则load()会截断 - 如果后端返回 JSON，就别用
load()—— 改用fetch()或$.get()，然后手动填充字段，比如modal.find('#name').val(data.name)
shown.bs.modal 才是内容操作的正确时机
show.bs.modal 触发时模态框 DOM 已存在但动画还没开始；shown.bs.modal 才是动画完成、焦点已设好、DOM 可安全操作的时刻。提前操作（比如在 show.bs.modal 里调 load() 后立刻找子元素）可能找不到节点。
- 动态加载内容后要初始化第三方组件？必须放
shown.bs.modal回调里，例如：$('#userModal').on('shown.bs.modal', function () { initSelect2(); }) - 如果用了
load()，它的回调函数本身就在 DOM 更新后执行，所以无需额外等shown.bs.modal—— 但初始化逻辑仍建议统一收口到shown.bs.modal，避免时序混乱 - 别在
hidden.bs.modal里.removeData('bs.modal')—— 这会清空 Bootstrap 内部实例，导致第二次点不弹出
多次打开失效？检查模态框 HTML 是否被替换
常见于用 load() 直接作用在 #userModal 整个模态框上，而不是仅作用在 .modal-body。这样会把 .modal-header、.modal-footer 甚至 data-bs-backdrop 等属性一并干掉，Bootstrap 无法识别这是同一个模态框实例。
- 永远只对
.modal-body调load()，保持模态框外壳结构不变 - 如果后端返回的是完整模态框 HTML（含 header/footer），前端必须先剥离，只留 body 内容，或改用 iframe
- 动态插入的按钮，要用事件委托绑定：
$(document).on('click', '[data-bs-toggle="modal"]', function () { ... })
最容易被忽略的一点：模态框里的表单提交后，如果不手动重置或清空 .modal-body，下次打开会残留上次的数据；而如果用 load() 每次都拉新内容，又得注意后端是否缓存了旧 HTML。这两者之间没银弹，得看业务要不要保留用户上次输入。
