HTML 中 ID 必须唯一，重复 ID 会导致 jQuery 只匹配首个元素；应改用 class 选择器配合事件委托或直接绑定，才能准确获取每个 标签的 data-id 值。
html 中 id 必须唯一，重复 id 会导致 jquery 只匹配首个元素；应改用 class 选择器配合事件委托或直接绑定，才能准确获取每个 `` 标签的 `data-id` 值。
在 Laravel Blade 模板中使用 @foreach 循环渲染多行数据时，若为每个编辑链接都设置相同的 id="edit_type"，将违反 HTML 规范（ID 在整个文档中必须唯一）。浏览器和 jQuery 的行为会因此受限：$('#edit_type') 仅选取 DOM 中第一个匹配元素，后续所有同名 ID 均被忽略——这正是你只能获取到第一个 data-id 的根本原因。
✅ 正确做法是用 class 替代 id，并使用类选择器绑定事件：
@foreach ($types as $type)
<tr>
<td>{{ $type->name }}</td>
<td>
<a href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" class="edit-type" data-id="{{ $type->id }}">
<i class="far fa-edit"></i>
</a>
<a href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" class="delete-type" data-id="{{ $type->id }}">
<i class="fas fa-trash-alt"></i>
</a>
</td>
</tr>
@endforeach对应 JavaScript（推荐使用 on() 防止动态内容失效，也兼容静态渲染）：
// 方式一：直接绑定（适用于页面加载后即存在的元素）
$('.edit-type').on('click', function(e) {
e.preventDefault();
const typeId = $(this).data('id'); // 推荐用 .data() 而非 .attr()，更语义化且自动类型转换
console.log('编辑类型ID：', typeId);
});
// 方式二：事件委托（更健壮，适用于 AJAX 动态插入的行）
$(document).on('click', '.edit-type', function(e) {
e.preventDefault();
const typeId = $(this).data('id');
console.log('编辑类型ID：', typeId);
});⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 禁止在循环中重复使用相同
id属性； - ✅
data-*属性是标准、安全的数据载体，推荐搭配.data()方法读取（jQuery 会缓存并智能转换数值/布尔值）； - ? 若后续通过 JS 动态追加表格行，务必使用 事件委托（如
$(document).on('click', '.edit-type', ...)），否则新元素无法响应事件； - ? 可进一步封装逻辑，例如弹出编辑模态框并预填
typeId，实现真正的 CRUD 交互闭环。
遵循这一规范，不仅能解决当前问题，更是构建可维护、可扩展前端代码的基础实践。
