datatables 启用分页后，动态生成的后续页面按钮无法触发 jquery 绑定的 click 事件，根本原因是事件监听器仅在 dom 加载时绑定到初始存在的元素，而分页内容由 datatables 动态渲染，未被重新绑定。
datatables 启用分页后，动态生成的后续页面按钮无法触发 jquery 绑定的 click 事件，根本原因是事件监听器仅在 dom 加载时绑定到初始存在的元素，而分页内容由 datatables 动态渲染，未被重新绑定。
在使用 DataTables（尤其是服务器端或客户端分页）时，表格数据并非一次性全部写入 DOM，而是按需渲染当前页内容。当你通过 $('.delete_member_data').click(...) 这类直接事件绑定方式注册监听器时，jQuery 只会为初始化时已存在于 DOM 中的 .delete_member_data 元素添加事件处理函数；当用户切换到第二页、第三页时，新插入的按钮元素并未被监听——因此点击无响应。
✅ 正确解法：使用 事件委托（Event Delegation），将事件监听器绑定在父级静态容器（如 <table>、#datatable 或 document）上，并指定目标选择器。这样，无论按钮何时动态插入，只要符合选择器条件，点击事件都会被正确捕获。
✅ 推荐解决方案（无需全局变量，更健壮）
$(document).ready(function() {
// 使用事件委托：绑定到 document（或更优的静态父容器，如 #memberTable）
$(document).on('click', '.delete_member_data', function(e) {
e.preventDefault();
const employee_id = $(this).attr('id'); // ✅ this 指向被点击的真实按钮
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "delete_members.php",
method: "POST",
data: { employee_id: employee_id },
success: function(data) {
Swal.fire('Deleted!', 'Member successfully deleted.', 'success')
.then(() => location.reload(true));
}
});
}
});
});
$(document).on('click', '.view_member_data', function() {
const employee_id = $(this).attr('id');
$.ajax({
url: "view_member_data.php",
method: "POST",
data: { employee_id: employee_id },
success: function(data) {
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
});
});⚠️ 注意事项与最佳实践
-
避免 id 重复：你当前代码中两个按钮共用同一 id="<?php echo $row["Member_ID"]; ?>"，这违反 HTML 规范（id 必须唯一）。建议改用 data-id 属性存储标识：
<button type="button" data-id="<?php echo $row['Member_ID']; ?>" class="btn btn-success btn-sm view_member_data"> <i class="bi bi-eye-fill"></i> </button> <button type="button" data-id="<?php echo $row['Member_ID']; ?>" class="btn btn-danger btn-sm delete_member_data"> <i class="bi bi-trash-fill"></i> </button>对应 JS 中获取改为：const employee_id = $(this).data('id');
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
性能优化：优先将委托容器设为离按钮最近的静态父元素（如 <table id="memberTable">），而非 document：
$('#memberTable').on('click', '.delete_member_data', function() { ... }); 不推荐全局变量方案：原答案中依赖 onclick="set_employee_id(...)" + 全局 employee_id 的方式存在竞态风险（多按钮快速点击可能导致 ID 错乱），且破坏了事件处理逻辑的封装性，属于反模式。
确保 DataTables 初始化完成后再绑定：若 DataTables 是异步初始化（如 AJAX 加载），请在 initComplete 回调中绑定事件，或使用 draw.dt 事件重绑（但委托方式通常无需此操作）。
通过事件委托，你只需一次绑定，即可覆盖所有当前及未来动态生成的匹配元素——这是解决 DataTables 分页、AJAX 刷新、动态表单等场景下事件失效问题的标准、可靠且可维护的方案。
