Datatable中动态生成按钮点击事件失效及Ajax数据提交问题问询

这个问题我太熟悉了！核心有两个原因导致你的点击函数无法触发：

1. 动态生成元素的事件绑定问题 #

你写的$('#remove').on('click', ...)是在页面初始化时，给已经存在于DOM中的元素绑定点击事件。但DataTable里的按钮是表格渲染完成后才动态生成的——绑定事件的时候这些按钮根本还没出现，自然监听不到点击行为。

而静态按钮能正常工作，是因为它在页面加载时就已经存在于DOM中，事件绑定能顺利找到它。

2. 重复ID的问题 #

你给每一行的按钮都设置了id='remove'，但HTML规范要求ID必须全局唯一。当页面中有多个相同ID的元素时，$('#remove')只会选中第一个匹配的元素，其他按钮的点击事件根本不会被监听，甚至可能引发其他DOM异常。

修复步骤 #

第一步：修改按钮的渲染逻辑，用class代替id #

把按钮的id='remove'改成class='remove-btn'，确保标识唯一且符合规范：

{
    "render": function (data, type, full, meta) {
        return "<button value='" + full.id + "' class='btn btn-danger remove-btn'><i class='fas fa-minus-circle'></i> Remove from Group</button>";
    }
},

第二步：使用事件委托绑定点击事件 #

把事件绑定到一个页面加载时就存在的父元素上（比如你的Datatable容器#documentsDatatable），通过选择器过滤出目标按钮。这样不管按钮什么时候动态生成，点击事件都能被监听到：

$(document).ready(function () { 
    // 初始化Datatable的代码保持不变...

    // 事件委托：绑定到Datatable容器，监听子元素.remove-btn的点击
    $('#documentsDatatable').on('click', '.remove-btn', function (e) {
        e.preventDefault();
        
        // 获取当前按钮对应的文档ID
        const documentId = $(this).val();
        
        $.ajax({
            type: 'POST',
            url: "https://localhost:44389/api/Group/Remove",
            // 这里的group参数可以根据实际场景调整，比如从页面其他元素获取或从数据中提取
            data: {id: documentId, group: 46},
            dataType: 'json',
            success: function (data) {
                console.log('移除成功', data);
                // 可选：刷新表格，更新数据
                $('#documentsDatatable').DataTable().ajax.reload();
            },
            error: function (xhr) {
                console.error('移除失败', xhr.responseText);
            }
        });
    });
});

额外提示 #

事件委托是处理动态元素事件的最优方案，它不需要在每次表格渲染（比如分页、搜索后）都重新绑定事件，性能更优。如果用DataTable的drawCallback回调来绑定事件，每次表格重绘都要执行一次绑定，反而容易出现重复绑定的问题，所以优先推荐事件委托的方式。

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