<p>模态框打开时通过 event.relatedTarget 获取触发按钮的 data-* 属性；.load() 需禁用缓存并手动处理错误；Bootstrap 5 中 relatedTarget 可能为 null，需人工补全或改用闭包传参；服务端优先返回 JSON 以确保交互元素正确初始化。</p>
模态框打开时怎么拿到触发按钮的 data-* 属性
Bootstrap 的 show.bs.modal 事件里，event.relatedTarget 就是点击的那个按钮元素，所有 data- 属性都从它身上取。别用 this 或者随便查 DOM，容易拿错。
常见错误：在 $('#myModal').on('show.bs.modal', ...) 回调里直接写 $(this).data('id') —— 这里的 this 是模态框本身，没挂 data 属性。
正确做法：
$('#myModal').on('show.bs.modal', function (event) {
const button = event.relatedTarget; // 触发按钮
const userId = $(button).data('user-id'); // 比如 data-user-id="123"
const title = $(button).data('title') || '默认标题';
<p>$(this).find('.modal-title').text(title);
$(this).find('.modal-body').load(<code>/api/user/${userId}/detail</code>);
});用 .load() 动态加载内容要注意什么
.load() 是 jQuery 提供的便捷方法，但默认会缓存 GET 请求，导致重复点同一个按钮时显示旧内容。
必须手动禁用缓存，否则调试时会以为数据没更新，其实是浏览器返回了缓存响应。
- 加时间戳参数：
.load('/path?_=' + Date.now()) - 或用
$.ajaxSetup({ cache: false })（不推荐全局改） - 更稳妥的是换用
$.get()+ 手动填充，便于错误处理
另外，.load() 不会自动处理 404 或 500 响应，失败时模态框 body 会空白，连提示都没有。
Bootstrap 5 里没有 relatedTarget？
有，但行为微调了：Bootstrap 5 的 show.bs.modal 事件对象里，relatedTarget 依然存在，但只在通过 data-bs-target 或 JavaScript show() 调用时才被设置；如果直接 new bootstrap.Modal(...).show() 且没传 triggerElement，它就是 null。
所以如果你是手写 JS 控制弹窗（比如表格行点击），得自己传参：
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal._element.addEventListener('show.bs.modal', function (e) {
if (!e.relatedTarget) {
e.relatedTarget = { dataset: { id: 'fallback-1' } }; // 人工补
}
});或者干脆不用 relatedTarget，改用闭包传参：
function openModalWithId(id) {
$('#myModal .modal-body').load(`/api/item/${id}`);
$('#myModal').modal('show');
}
// 然后按钮 onclick="openModalWithId(42)"服务端返回 HTML 片段还是 JSON？
取决于内容复杂度。纯文本/简单结构用 HTML 片段最省事；含表单、事件绑定、第三方组件（如日期选择器）就一定要返回 JSON，前端用模板拼接再初始化。
原因：直接 .load() 插入的 HTML 不会自动执行 <script>，也不会触发 jQuery 插件的初始化逻辑（比如 $('[data-toggle="tooltip"]').tooltip()）。
如果非要用 HTML 片段，插入后得手动补：
$(modalBody).load(url, function() {
$('[data-toggle="tooltip"]', this).tooltip(); // 重新绑定
$('.select2', this).select2(); // 如果用了 select2
});但这类手动维护容易漏，长期看不如服务端返回 JSON，前端统一渲染 + 初始化。
真正麻烦的不是传参，是弹窗里那些需要二次激活的交互元素——它们不会因为“出现在模态框里”就自动工作。
