jQuery Datatables搜索与drawCallback递归绑定致表单ID重复添加问题

问题根源 #

Datatables 的 drawCallback 会在每次表格重绘（搜索、分页、排序等操作触发）时执行。你当前的代码在这个回调里重复给 .btnNewOrder 绑定点击事件：

• 搜索时每输入一个字符就触发一次重绘，绑定一次点击事件，导致按钮被绑定了N次事件（N等于搜索输入的字符数）
• 点击按钮时，N个事件会依次执行，每次都执行一次添加客户ID的逻辑，最终导致ID重复添加
• 用 .on("click") 无效，是因为没有先解绑旧事件，也没采用事件委托的方式避免重复绑定

解决方案 #

推荐两种可行方案，优先选择事件委托（更高效，无重复绑定问题）：

方案1：事件委托（最优） #

将点击事件绑定到表格的父容器（不会随重绘销毁），利用事件冒泡机制处理动态生成的按钮点击，只需绑定一次即可。同时把模态框隐藏事件也移到外部，避免重复绑定。

修改后的代码：

$("#list_clients").DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "responsive": true
    // 移除drawCallback内的事件绑定逻辑
});

// 事件委托：绑定到表格容器，处理动态生成的.btnNewOrder点击
$("#list_clients").on("click", ".btnNewOrder", function (e){  
    e.preventDefault();
    
    var clientId = $(this).data('id');

    // AJAX请求
    $.ajax({
        url: "<?= url("commercial/sales/order/new/") ?>" + clientId,
        type: 'post',
        data: {
            action: "getFieldsOrder",
        },
        success: function(response){  
            // 填充模态框内容并显示
            $('#modal-newOrder .modal-body').html(response); 
            $('#modal-newOrder').modal('show');                                    
            
            // 直接设置完整的表单action，避免拼接导致的重复添加
            var baseUrl = "<?= url("commercial/sales/order/new/") ?>";
            $('#newOrderForm').attr('action', baseUrl + clientId);
        }
    });
});

// 模态框隐藏事件仅绑定一次，重置表单action
$('#modal-newOrder').on('hide.bs.modal', function () {
    var baseUrl = "<?= url("commercial/sales/order/new/") ?>";
    $('#newOrderForm').attr('action', baseUrl);
});

方案2：解绑旧事件后再绑定（备选） #

如果必须保留 drawCallback，每次绑定新事件前先解绑按钮上的旧点击事件，避免重复绑定：

$("#list_clients").DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "responsive": true,                  
    drawCallback: function (settings) {
        // 先解绑所有旧的click事件，再绑定新事件
        $('.btnNewOrder').off("click").on("click", function (e){  
            e.preventDefault();
            
            var clientId = $(this).data('id');

            // AJAX请求
            $.ajax({
                url: "<?= url("commercial/sales/order/new/") ?>" + clientId,
                type: 'post',
                data: {
                    action: "getFieldsOrder",
                },
                success: function(response){  
                    $('#modal-newOrder .modal-body').html(response); 
                    $('#modal-newOrder').modal('show');                                    
                    
                    var baseUrl = "<?= url("commercial/sales/order/new/") ?>";
                    $('#newOrderForm').attr('action', baseUrl + clientId);
                }
            });
        });   
    }
});

// 模态框隐藏事件单独绑定，仅执行一次
$('#modal-newOrder').on('hide.bs.modal', function () {
    var baseUrl = "<?= url("commercial/sales/order/new/") ?>";
    $('#newOrderForm').attr('action', baseUrl);
});

额外优化点 #

• 表单action不再采用拼接方式，而是直接用基础URL+客户ID，彻底避免重复添加ID的风险
• 模态框隐藏事件只绑定一次，不会随按钮点击重复绑定，避免多次执行重置逻辑

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