本文详解如何修复表格内多个按钮共用同一 id 导致仅第一个 modal 可打开的常见问题，通过事件委托与函数化调用实现每行独立弹窗，并提供可运行的 jquery + bootstrap 5 完整示例。
在使用 Bootstrap Modal 与动态渲染的 HTML 表格（如 Laravel Blade 中的 @foreach 循环）时，一个高频错误是：所有“查看详情”按钮都使用了相同的 id="getData"。HTML 规范要求 id 属性必须唯一，当 jQuery 执行 $("#getData") 时，只会绑定到 DOM 中第一个匹配元素，因此只有首行按钮能触发 Modal —— 后续按钮点击完全无响应。
✅ 正确做法：移除重复 ID，改用类选择器 + 数据传递
首先，修改表格中每一行的按钮代码，删除 id="getData"，改为使用通用类名（如 class="btn-show-modal"），并通过 data-id 属性携带当前商户 ID：
Show
同时，确保你的 Modal 结构保持唯一（即整个页面只定义一个 Modal，复用它显示不同数据），无需为每行生成独立 Modal：
Merchant Details
✅ JavaScript：使用事件委托 + 函数封装
由于按钮是动态生成的（尤其在分页或 AJAX 刷新后），推荐使用 事件委托（Event Delegation） 绑定点击事件，而非 $(document).ready() 内直接绑定。同时将逻辑封装为独立函数，提升可维护性：
? 关键改进点说明：$('#users-crud').on('click', '.btn-show-modal', ...)：利用事件委托，即使后续通过 JS 动态插入新行，新按钮也能自动响应；new bootstrap.Modal(...).show()：符合 Bootstrap 5+ 的官方 API，避免过时的 .modal('show') 写法；data-id 作为数据载体，语义清晰且兼容性好；错误处理增强：捕获并提示常见请求失败场景，便于调试。
⚠️ 注意事项与最佳实践
- 禁止重复 ID：永远不要在循环中为多个元素设置相同 id（如 id="getData"），这是导致本问题的根本原因；
-
Modal 不要重复渲染：一个 Modal 实例复用即可，避免在循环中生成多个 ，否则会污染 DOM、引发样式/行为异常；
- 后端接口需返回 JSON：确保 route('merchants.show') 对应的控制器方法返回标准 JSON 响应，例如：
// Laravel 控制器示例 public function show(Request $request) { $merchant = Merchant::findOrFail($request->id); return response()->json([ 'id' => $merchant->id, 'first_name' => $merchant->first_name, 'email' => $merchant->email ]); }- CSRF 保护：若使用 POST/PUT 等方法，记得在 AJAX 中添加 _token；GET 请求通常无需额外处理；
- 性能优化（可选）：对高频操作（如快速连点），可在请求发起前禁用按钮，响应后恢复，防止重复提交。
通过以上改造，你将获得一个健壮、可扩展的表格行级 Modal 方案：每一行“Show”按钮均可独立触发 Modal，并准确加载对应商户数据，彻底解决“仅第一个生效”的顽疾。
- 后端接口需返回 JSON：确保 route('merchants.show') 对应的控制器方法返回标准 JSON 响应，例如：
