如何正确为动态生成的 HTML 元素绑定点击事件并获取 data-id 值-php教程-PHP中文网

如何正确为动态生成的 HTML 元素绑定点击事件并获取 data-id 值

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() 防止动态内容失效，也兼容静态渲染）：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

// 方式一：直接绑定（适用于页面加载后即存在的元素）
$('.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 交互闭环。

遵循这一规范，不仅能解决当前问题，更是构建可维护、可扩展前端代码的基础实践。