本文详解如何修复表格内多个“show”按钮仅首个可打开 bootstrap modal 的常见问题，核心在于避免 id 重复、改用事件委托与函数化调用，确保每个行数据都能独立、正确地加载并显示对应信息。
在使用 Bootstrap Modal 与动态渲染的 HTML 表格（如 Laravel Blade 中的 @foreach）时，一个高频问题是：只有表格第一行的“Show”按钮能成功弹出 Modal，其余按钮点击无响应或始终显示第一条数据。根本原因在于 HTML 中重复使用了相同 id="getData"，而 JavaScript 通过 $("#getData") 绑定事件时，仅匹配到第一个元素（DOM ID 必须唯一），导致后续按钮完全失效。
✅ 正确解决方案：去 ID 化 + 函数驱动 + 事件解耦
1. 修改 HTML：移除重复 ID，改用 data-* 属性与内联调用
<td>
<a href="javascript:void(0)"
class="btn btn-info btn-show-modal"
data-id="{{ $merchant->id }}">
Show
</a>
</td>✅ 优势：
- 移除全局重复 id，符合 HTML 规范；
- 使用 data-id 安全携带行级唯一标识；
- 添加统一类名 btn-show-modal 便于后续事件委托绑定。
⚠️ 注意：不要在循环中写 onClick="getData({{ $merchant->id }})" —— 虽然可行，但混合逻辑与模板易出错（如引号转义、XSS 风险），推荐纯 JS 解耦方案。
2. 重写 JavaScript：使用事件委托 + 参数化函数
<script type="text/javascript">
$(document).ready(function() {
// ✅ 使用事件委托：监听 tbody 下所有 .btn-show-modal 点击
$('#users-crud').on('click', '.btn-show-modal', function(e) {
e.preventDefault();
const merchantId = $(this).data('id'); // 安全获取 data-id 值
// 显示 Modal（Bootstrap 5 写法）
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
// 发起 AJAX 请求，加载指定商户数据
$.ajax({
type: 'GET',
url: '{{ route("merchants.show") }}', // ✅ 推荐使用命名路由，更健壮
data: { id: merchantId },
dataType: 'json',
success: function(data) {
// ✅ 使用 .text() 替代 .html() 防 XSS（除非内容含可信 HTML）
$('#id').text(data.id);
$('#first_name').text(data.first_name);
// 若后端返回 email，可追加：$('#email').text(data.email);
},
error: function(xhr) {
console.error('AJAX Error:', xhr.responseJSON?.message || xhr.statusText);
alert('加载数据失败，请检查网络或后端接口');
}
});
});
});
</script>3. Modal 结构优化建议（增强可维护性）
为避免多个 Modal 共享同一套 DOM 导致状态污染，建议在 Modal body 中明确标注数据上下文：
立即学习“前端免费学习笔记（深入）”；
<div class="modal-body"> <h5>商户详情（ID: <span id="modal-merchant-id"></span>）</h5> <p><strong>ID：</strong><span id="id"></span></p> <p><strong>姓名：</strong><span id="first_name"></span></p> <!-- 可扩展其他字段 --> </div>
并在 JS 成功回调中同步更新标题：
$('#modal-merchant-id').text(data.id);? 调试关键点（快速定位问题）
- 浏览器控制台（F12 → Console）：检查是否报错 Uncaught Error: No modal found（Bootstrap 版本不匹配）、404 Not Found（路由错误）或 500 Internal Server Error（后端异常）；
- Network 标签页：确认 AJAX 请求 URL、参数、响应数据格式是否符合预期；
- HTML 源码审查：右键 → “查看页面源代码”，验证 data-id 是否被正确渲染（如 data-id="123" 而非 data-id=""）；
- Bootstrap 版本一致性：本文示例基于 Bootstrap 5（bootstrap.Modal），若使用 Bootstrap 4，请改用 $('#myModal').modal('show')。
✅ 总结：三步落地最佳实践
| 步骤 | 关键操作 | 目的 |
|---|---|---|
| 1. 清理 HTML | 移除所有重复 id，改用 data-id + 语义化 class | 符合标准，避免选择器歧义 |
| 2. 重构 JS | 使用 $(...).on('click', selector, handler) 事件委托 | 动态生成的行也能响应，无需重复绑定 |
| 3. 强化鲁棒性 | 添加 AJAX 错误处理、.text() 替代 .html()、命名路由 | 提升稳定性与安全性 |
遵循以上方案，即可让表格中每一行的“Show”按钮都独立、可靠地打开 Modal 并加载对应数据——不再受限于“仅第一个有效”的陷阱。
