datatables 启用分页后，动态生成的后续页面按钮无法触发 jquery 绑定的 click 事件，根本原因是事件监听器仅在 dom 加载时绑定到初始存在的元素，而分页内容由 datatables 动态渲染，未被重新绑定。

datatables 启用分页后，动态生成的后续页面按钮无法触发 jquery 绑定的 click 事件，根本原因是事件监听器仅在 dom 加载时绑定到初始存在的元素，而分页内容由 datatables 动态渲染，未被重新绑定。

在使用 DataTables（尤其是服务器端或客户端分页）时，表格数据并非一次性全部写入 DOM，而是按需渲染当前页内容。当你通过 $('.delete_member_data').click(...) 这类直接事件绑定方式注册监听器时，jQuery 只会为初始化时已存在于 DOM 中的 .delete_member_data 元素添加事件处理函数；当用户切换到第二页、第三页时，新插入的按钮元素并未被监听——因此点击无响应。

✅ 正确解法：使用 事件委托（Event Delegation），将事件监听器绑定在父级静态容器（如

、#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=""，这违反 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等老旧浏览器的项目。

  下载

• 性能优化：优先将委托容器设为离按钮最近的静态父元素（如

），而非 document：

$('#memberTable').on('click', '.delete_member_data', function() { ... });

不推荐全局变量方案：原答案中依赖 onclick="set_employee_id(...)" + 全局 employee_id 的方式存在竞态风险（多按钮快速点击可能导致 ID 错乱），且破坏了事件处理逻辑的封装性，属于反模式。

确保 DataTables 初始化完成后再绑定：若 DataTables 是异步初始化（如 AJAX 加载），请在 initComplete 回调中绑定事件，或使用 draw.dt 事件重绑（但委托方式通常无需此操作）。

通过事件委托，你只需一次绑定，即可覆盖所有当前及未来动态生成的匹配元素——这是解决 DataTables 分页、AJAX 刷新、动态表单等场景下事件失效问题的标准、可靠且可维护的方案。