本文讲解如何在使用 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。
