本文讲解如何在使用 ajax 加载数据的 datatable 中，为每行动态生成的删除按钮绑定事件，并准确获取对应行的唯一 id，避免因重复 id 导致始终读取首行 id 的常见错误。

本文讲解如何在使用 ajax 加载数据的 datatable 中，为每行动态生成的删除按钮绑定事件，并准确获取对应行的唯一 id，避免因重复 id 导致始终读取首行 id 的常见错误。

在 jQuery DataTable 中，通过 mRender（或现代写法中的 render）函数动态生成按钮时，若为每个按钮设置相同的 id="deletebtn"，将违反 HTML 规范——ID 必须全局唯一。浏览器仅识别第一个匹配的 ID，因此 $("#deletebtn").val() 总是返回首行的值，而非点击目标行的数据。

✅ 正确做法是：改用 class 绑定事件，并通过 $(this) 获取当前点击元素上下文。

以下是优化后的完整代码示例：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

var table = $('#table1').DataTable({
    dom: "Bfrtip",
    ajax: {
        url: "http://localhost/cokeinventory/rest-api/api-search-stockin.php",
        dataSrc: "doc"
    },
    columns: [
        { data: 'stock_id' },
        { data: 'item_name' },
        { data: 'unit' },
        { data: 'stockin_qty' },
        { data: 'barcode_number' },
        { data: 'barcode_label' },
        { data: 'balquantity' },
        {
            data: null,
            className: "dt-center",
            orderable: false,
            render: function (data, type, row) {
                // ✅ 移除 id，使用 class="deletebtn" 实现批量委托
                return `<button class="btn btn-danger deletebtn" data-id="${data.stock_id}">
                          Delete <i class="fe fe-delete"></i>
                        </button>`;
            }
        }
    ]
});

// ✅ 使用事件委托 + class 选择器，绑定到动态生成的按钮
$("body").on("click", ".deletebtn", function () {
    // ✅ $(this) 指向被点击的具体按钮，.val() 或 .data('id') 均可取值
    var stockId = $(this).data("id"); // 推荐：语义更清晰，支持自动类型转换
    // 或 var stockId = $(this).val(); // 若保留 value 属性也可用

    if (confirm(`确定删除 ID 为 ${stockId} 的记录？`)) {
        // ✅ 此处可发起 AJAX 删除请求
        $.post("delete-stock.php", { id: stockId }, function (res) {
            if (res.success) {
                table.row($(this).closest('tr')).remove().draw(); // 刷新表格
                alert("删除成功");
            }
        });
    }
});

? 关键要点总结：

• ❌ 禁止在循环/渲染中重复使用相同 id（如 id="deletebtn"），会导致 DOM 查询失效；
• ✅ 使用 class 配合事件委托（$("body").on("click", ".deletebtn", ...)）处理动态元素；
• ✅ 优先使用 data-* 属性（如 data-id）存储业务 ID，比 value 更规范、更易扩展；
• ✅ 通过 $(this).closest('tr') 可快速定位所在行，便于调用 DataTable API（如 row().remove()）；
• ⚠️ 若表格启用了服务器端处理（serverSide: true），删除后需重新加载数据（table.ajax.reload()），而非仅前端移除。

遵循以上实践，即可稳定、可靠地在 DataTable 中响应每一行的删除操作，并精准获取对应数据 ID。