本文详解如何修复表格内多个“查看”按钮只能打开第一个模态框的常见问题，通过将重复 id 改为函数调用 + 唯一参数传递，并配合事件解耦与动态数据加载，实现每行独立弹出正确内容的模态框。
在使用 Bootstrap 模态框（Modal）配合动态渲染的 HTML 表格时，一个高频问题是：所有操作按钮点击后，均只触发同一个（通常是第一个）模态框，且展示的数据始终是首行数据。根本原因在于你使用了重复的 id="getData" —— HTML 规范要求 id 全局唯一，而 jQuery 的 $("#getData") 选择器只会匹配第一个匹配元素，导致后续按钮完全失效。
✅ 正确做法：移除重复 ID，改用事件委托 + 函数传参
首先，修改表格中每行的按钮写法，删除 id="getData"（避免重复），改为内联调用带参数的 JavaScript 函数：
Show
? 提示：{{ $merchant->id }} 是 Laravel Blade 语法，确保输出为纯数字（如 123），避免引号包裹（即不要写成 '{{ $merchant->id }}'），否则 JS 会将其识别为字符串而非数值，可能影响后续接口请求。
✅ 模态框结构保持不变（推荐复用单个 Modal）
无需为每行生成独立模态框，复用一个
）能被动态更新：
✅ 注意：将 p#id 等改为 span 更语义化；同时补充 #email 字段以匹配后端返回结构。
✅ JavaScript 逻辑重构：独立函数 + 动态 AJAX 请求
将点击逻辑抽离为具名函数 getData(id)，并确保使用正确的路由和数据处理方式：
? 关键改进点：
- 使用 bootstrap.Modal 实例化（Bootstrap 5+ 推荐方式），避免 $('#myModal').modal('show') 在新版中失效；
- 请求前清空 DOM 内容，防止跨行数据污染；
- success 中使用 .text() 而非 .html()，防止 XSS 风险；
- 添加 error 回调，便于快速定位后端路由/权限/JSON 格式问题。
⚠️ 常见陷阱与注意事项
❌ 不要使用 id 绑定多元素事件：$("#getData").click(...) 永远只绑定第一个元素；
-
✅ 推荐进阶方案（事件委托）：若表格支持动态增删行，应改用事件委托：
$(document).on('click', '[data-action="show-merchant"]', function() { const id = $(this).data('id'); getData(id); });对应按钮写法：Show
后端响应格式必须为 JSON，且字段名与前端 response.xxx 严格一致（如 first_name 而非 firstName）；
确保 CSRF Token 已注入（Laravel 中通常已自动包含在 axios 或 $.ajaxSetup 中）；
检查浏览器控制台（F12 → Console）是否有 404（路由错误）、500（服务端异常）或 CORS 报错。
✅ 总结
修复“表格中仅首个模态框生效”的本质，是摒弃基于重复 id 的硬编码绑定，转向参数化函数调用 + 单模态框动态填充的设计模式。它不仅解决了当前问题，还提升了代码可维护性、安全性与扩展性。只要确保路由可达、数据结构一致、DOM 更新及时，每一行都能精准弹出属于自己的完整信息。
