html 中 id 必须唯一，重复 id 会导致 jquery 只匹配首个元素；应改用 class 选择器配合 data-id 属性，才能准确获取每一行编辑按钮的对应 id。
html 中 id 必须唯一，重复 id 会导致 jquery 只匹配首个元素；应改用 class 选择器配合 data-id 属性，才能准确获取每一行编辑按钮的对应 id。
在 Laravel Blade 模板中动态渲染表格时，若对循环生成的 <a></a> 标签统一使用相同 id="edit_type"，会违反 HTML 规范（ID 全局唯一性），导致 jQuery 的 $('#edit_type') 仅绑定到第一个匹配元素，后续所有按钮点击均无法触发或始终返回首个 data-id。
✅ 正确做法是：将 id 替换为 class，并使用类选择器委托事件。修改后的 Blade 模板如下：
@foreach ($types as $type)
<tr>
<td>{{ $type->name }}</td>
<td>
<a href="javascript:void(0)" class="edit-type-btn" data-id="{{ $type->id }}">
<i class="far fa-edit"></i>
</a>
<a href="javascript:void(0)" class="delete-type-btn" data-id="{{ $type->id }}">
<i class="fas fa-trash-alt"></i>
</a>
</td>
</tr>
@endforeach
对应 jQuery 代码（推荐使用事件委托，兼容动态插入内容）：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
// ✅ 推荐：使用事件委托（绑定到 tbody 或 table，避免重复绑定）
$('tbody').on('click', '.edit-type-btn', function(e) {
e.preventDefault();
const typeId = $(this).data('id'); // 推荐用 .data() 而非 .attr()，自动类型转换更安全
console.log('编辑类型 ID:', typeId);
// 此处可发起 AJAX 请求或打开编辑模态框
});
// 同理处理删除操作
$('tbody').on('click', '.delete-type-btn', function(e) {
e.preventDefault();
const typeId = $(this).data('id');
if (confirm(`确定删除 ID 为 ${typeId} 的类型？`)) {
// 执行删除逻辑
}
});
⚠️ 注意事项：
-
禁止在循环中重复使用相同
id：浏览器和 jQuery 均只识别首个，其余被忽略； - *优先使用
.data()获取 `data-属性**：它会自动缓存、转换类型（如数字转为Number），比.attr('data-id')` 更健壮； -
事件委托更优：
$(staticParent).on('event', 'dynamicSelector', handler)能避免为每个按钮单独绑定事件，提升性能且支持后续动态添加的行； - 若需在事件中访问整行数据，可通过
$(this).closest('tr')获取当前行，再用find()提取其他单元格内容。
通过规范使用 class 和事件委托，即可稳定、高效地为每条记录绑定独立行为，彻底解决“只能获取第一个 data-id”的问题。
