本文讲解如何在使用 ajax 加载数据的 datatable 中，为每行动态生成的删除按钮绑定事件，并准确获取对应行的唯一 id，避免因重复 id 导致始终只读取首行 id 的常见错误。
本文讲解如何在使用 ajax 加载数据的 datatable 中，为每行动态生成的删除按钮绑定事件，并准确获取对应行的唯一 id，避免因重复 id 导致始终只读取首行 id 的常见错误。
在基于 jQuery DataTable 的动态表格中，常需为每行添加操作按钮（如“删除”）。但若直接为所有按钮设置相同 id="deletebtn"，将违反 HTML 规范（ID 必须唯一），导致 $("#deletebtn").val() 始终仅返回 DOM 中第一个匹配元素的值——这正是你遇到“总是获取第一行 ID”的根本原因。
正确的做法是：用 class 替代 id 进行事件委托，并通过 $(this) 精准定位被点击的按钮实例。以下是完整修正方案：
✅ 步骤一：修改列渲染逻辑（移除重复 ID，改用 class）
{
data: null,
className: "dt-center editor-delete",
orderable: false,
mRender: function (data, type, row) {
// 关键：移除 id="deletebtn"，改用 class="deletebtn"
return `<button class="btn btn-success deletebtn" value="${data.stock_id}">
Delete <i class="fe fe-delete"></i>
</button>`;
}
}
? 提示：使用模板字符串（反引号）提升可读性；
value属性安全承载 ID 值，无需额外 data-* 属性。
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 步骤二：使用事件委托绑定点击事件
$("body").on("click", ".deletebtn", function() {
const clickedId = $(this).val(); // ✅ this 指向当前被点击的按钮
alert(`即将删除记录 ID：${clickedId}`);
// 实际项目中可在此发起 AJAX 删除请求
// $.post('/api/delete-stock', { id: clickedId }, function(res) {
// table.row($(this).closest('tr')).remove().draw();
// });
});
⚠️ 注意事项
-
永远不要在循环/渲染中生成重复 ID：DataTable 每行都会调用
mRender，id="deletebtn"会生成数十个同名 ID，破坏 DOM 唯一性。 -
必须使用事件委托：因为按钮是 DataTable 动态插入 DOM 的，直接
$(".deletebtn").on("click", ...)无法绑定尚未存在的元素；$("body").on("click", ".deletebtn", ...)则能捕获未来生成的匹配元素。 -
推荐升级写法（可选）：现代 DataTable 支持
render（替代已废弃的mRender），且建议用data-id存储 ID 更语义化：render: (data, type, row) => `<button class="btn btn-danger delete-btn" data-id="${row.stock_id}">Delete</button>`对应 JS 获取：
const id = $(this).data("id");
掌握这一模式，不仅能解决删除 ID 获取问题，也为编辑、详情等行级操作打下坚实基础。
