html 中 id 属性必须唯一，重复使用会导致 jquery 仅匹配首个元素；应改用 class 绑定事件，并通过 this 精准获取当前点击元素的 data-id 值。
html 中 id 属性必须唯一，重复使用会导致 jquery 仅匹配首个元素；应改用 class 绑定事件，并通过 this 精准获取当前点击元素的 data-id 值。
在 Laravel Blade 模板中动态渲染表格时，若对每行编辑按钮统一使用相同 `id="edit_type"`，虽能通过 `@foreach` 正确输出多个 `` 标签，但会违反 HTML 规范——**id 必须全局唯一**。此时 jQuery 的 `$('#edit_type')` 选择器仅捕获 DOM 中第一个匹配元素，后续所有按钮点击均触发同一事件（且 `this` 始终指向首个按钮），导致 `data-id` 始终取自第一条数据。
✅ 正确做法是：用 class 替代 id 进行事件委托绑定。修改 Blade 模板如下： 对应 jQuery 代码应改为： ⚠️ 注意事项： "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。 通过以上调整，每个编辑按钮都能独立、准确地传递自身所属数据项的 @foreach ($types as $type)
<tr>
<td>{{ $type->name }}</td>
<td>
<a href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" class="edit-type-btn" data-id="{{ $type->id }}">
<i class="far fa-edit"></i>
</a>
<a href="#" class="delete-type-btn" data-id="{{ $type->id }}">
<i class="fas fa-trash-alt"></i>
</a>
</td>
</tr>
@endforeach
// 使用 class 选择器 + 事件委托（推荐用于动态内容）
$(document).on('click', '.edit-type-btn', function(e) {
e.preventDefault();
const typeId = $(this).data('id'); // 推荐用 .data() 而非 .attr()
console.log('编辑类型 ID：', typeId);
// 此处可发起 AJAX 请求或打开编辑模态框
});
@foreach, v-for, *ngFor）中，严禁为多个元素分配相同 id； .data()：jQuery 的 .data('id') 会自动转换数据类型并缓存，比 .attr('data-id') 更健壮； $(document).on('click', '.selector', ...) 而非直接 $('.selector').click(...)，确保新元素也能响应事件； edit-type-btn 比 edit_type 更符合 CSS 命名惯例（kebab-case），也利于团队协作与维护。id，从根本上解决“只能获取第一个 data-id”的问题。
