
本文详解如何修复表格内多个“查看”按钮只能打开第一个模态框的常见问题,通过将重复 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 更新及时,每一行都能精准弹出属于自己的完整信息。











