Bootstrap Modal 初始化时不能靠 data-bs-* 传参，所有动态内容填充必须在 show.bs.modal 事件中通过 event.relatedTarget.dataset 手动处理，否则会出错或残留旧数据。
Bootstrap Modal 初始化时不能靠 data-bs-* 传参——这些属性只用于触发控制，不参与数据传递。 所有动态内容填充必须在 show.bs.modal 事件中手动处理，否则会拿不到值、填错位置或覆盖残留内容。
为什么 data-bs-* 属性不能直接当参数用
Bootstrap 的 data-bs-* 属性（如 data-bs-id、data-bs-type）仅被 data-api 用来解析触发行为，比如决定弹哪个 modal、是否禁用 backdrop。它们不会自动映射到模态框实例的 options 或 data 对象里。
-
data-bs-target只负责定位 DOM 元素，不是传参通道 -
data-bs-backdrop="static"这类是配置项，影响的是 modal 行为，不是业务数据 - 你写
data-bs-user='{"id":1}'，浏览器只会把它当无效 HTML 解析，取出来是空字符串或undefined
show.bs.modal 是唯一能稳定取到按钮上下文的地方
这个事件在 modal 尚未渲染完成、但已确定要显示时触发，event.relatedTarget 稳定指向你点击的那个按钮——这是唯一可信赖的数据源。
- 别在按钮上写
onclick="openModal({id:1})"：对象序列化/转义易出错，且破坏语义 - 别用
$('#modal').modal('show')后再.find()填值：可能因 modal 还没初始化完而找不到元素 - 正确做法是监听事件后读取：
const id = event.relatedTarget.dataset.userId - 如果存的是 JSON 字符串，记得先
decodeURIComponent()再JSON.parse()
复杂对象怎么塞进 data-bs-* 又安全又可用
HTML 的 data-* 天然只支持字符串，所以得自己做编码转换，但必须避开敏感字段和结构陷阱。
- 简单字段（ID、状态码、邮箱）直接写：
data-bs-id="123" data-bs-status="active" - 多字段对象走 URL 编码 + JSON：
data-bs-payload="%7B%22id%22%3A456%2C%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%7D" - 在事件回调里还原：
JSON.parse(decodeURIComponent(event.relatedTarget.dataset.payload)) - 千万别放 token、密码、session_id 等敏感信息——它们明文躺在 DOM 里，谁都能右键查看
Modal 必须全局唯一，否则 event.relatedTarget 会失效
常见错误是在循环生成表格行时，给每行都配一个完整 modal，ID 全叫 #editModal。结果所有按钮的 event.relatedTarget.dataset 都指向第一个 modal 的按钮，后续点击全乱套。
- 一个页面只保留一个 modal 结构，通过事件动态填充内容
- 确保
data-bs-target的值与 modal 的id严格一致（包括开头的#） - 如果 modal 是 JS 动态插入的，得手动用
new bootstrap.Modal()初始化，不能依赖 data-api 自动绑定
真正容易被忽略的是：Modal 内容更新后，关闭再打开时若没清空上次数据，就会出现“旧内容闪一下再变新”的现象。每次 show.bs.modal 回调开头加一句 $(this).find('.modal-body, .modal-title').empty()，比事后 debug 强十倍。
