从DataTable按钮传递行ID至模态框：事件绑定错误排查

错误根源 #

你遇到的e.getAttribute不是函数，是因为在事件委托中误用了jQuery封装的事件对象调用原生DOM方法。jQuery事件对象e和原生DOM事件对象不是同一类型，直接调用getAttribute会触发类型错误。

分步解决代码示例 #

1. 绑定Modify按钮的点击事件（获取行ID）

因为DataTable的行是动态渲染的，必须用事件委托绑定到已存在的父容器（比如表格的根元素）：

// 假设你的DataTable表格ID是event-table，Modify按钮的类是modify-btn
$('#event-table').on('click', '.modify-btn', function() {
    // 获取当前按钮所在行的ID，根据实际情况选择方式：
    // 方式1：如果行元素有id属性
    const rowId = $(this).closest('tr').attr('id');
    // 方式2：如果行用data-id存储ID（更推荐）
    // const rowId = $(this).closest('tr').data('id');

    // 将行ID存入模态框，方便后续操作获取
    $('#schedule-modal').data('target-row-id', rowId);
    // 打开模态框
    $('#schedule-modal').modal('show');
});

2. 绑定模态框内按钮的点击事件（获取操作类型）

如果模态框是静态渲染的，可直接绑定；如果是动态生成的，同样用事件委托：

// 假设模态框内Reschedule按钮ID是reschedule-btn，Cancel按钮ID是cancel-btn
$(document).on('click', '#reschedule-btn, #cancel-btn', function() {
    // 取出之前存入的行ID
    const rowId = $('#schedule-modal').data('target-row-id');
    // 获取当前点击的操作类型
    const actionType = $(this).attr('id').replace('-btn', ''); // 得到reschedule或cancel
    // 或者用data属性定义操作类型（更灵活）：
    // const actionType = $(this).data('action');

    // 执行你的业务逻辑，比如提交审批/修改请求
    console.log(`处理行ID：${rowId}，操作类型：${actionType}`);

    // 关闭模态框
    $('#schedule-modal').modal('hide');
});

关键注意事项 #

• 最初的TypeError是因为直接绑定动态生成的.modify-btn时，元素还未被DataTable渲染到DOM中，事件委托是正确的解决方向。
• 处理事件时，优先用$(this)获取当前触发元素，比通过事件对象e.target更直观，也避免了原生与jQuery对象的混淆。
• 存储临时数据（比如行ID）时，用jQuery的data()方法比手动操作DOM属性更简洁安全。

内容的提问来源于stack exchange，提问作者HotTomales