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 模板如下：
@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对应 jQuery 代码应改为：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
// 使用 class 选择器 + 事件委托（推荐用于动态内容）
$(document).on('click', '.edit-type-btn', function(e) {
e.preventDefault();
const typeId = $(this).data('id'); // 推荐用 .data() 而非 .attr()
console.log('编辑类型 ID：', typeId);
// 此处可发起 AJAX 请求或打开编辑模态框
});⚠️ 注意事项：
-
避免重复 id：任何循环渲染场景（如
@foreach,v-for,*ngFor）中，严禁为多个元素分配相同id； -
优先使用
.data()：jQuery 的.data('id')会自动转换数据类型并缓存，比.attr('data-id')更健壮； -
启用事件委托：若表格内容后续通过 JS 动态追加（如分页加载），应使用
$(document).on('click', '.selector', ...)而非直接$('.selector').click(...)，确保新元素也能响应事件； -
语义化命名：
edit-type-btn比edit_type更符合 CSS 命名惯例（kebab-case），也利于团队协作与维护。
通过以上调整，每个编辑按钮都能独立、准确地传递自身所属数据项的 id，从根本上解决“只能获取第一个 data-id”的问题。
