复选框单击事件在数据表的第二页不起作用？

Posted 2023-05-09

【中文标题】复选框单击事件在数据表的第二页不起作用？

【英文标题】：checkbox Click event is not working from second page in datatable?

【发布时间】：2017-04-27 15:19:24

【问题描述】：

我有一个数据表并填充了 Ajax 响应。我在顶部有一个提交按钮，我想处理提交的点击事件， 我在每一行都有输入文本框，下面的代码仅适用于前 10 行，如果单击数据表中的下一个按钮，则提交 ($('#createOrderId').click) 事件不起作用。我尝试在 fndrawcallback 中创建更改事件，但这也不起作用。 谁可以帮我这个事。

function showCheckoutResults(obj) 
oTable = $('#checkoutTable').DataTable(
    bDestroy : true,
    "autoWidth": false,
    columnDefs : [ 
        width: "2%", 
        targets : 0,
        className : 'dt-body-center select-checkbox',
        'checkboxes': 
               //'selectRow': true
            
    ,
    
        "targets": [ 10 ],
        "visible": false
    
    ],
    select : 
        style : 'multi',
        selector: 'td:first-child'

    ,
    order : [ [ 1, 'asc' ] ],
    "fnDrawCallback": function() 
        loadDatePicker();
         $('.commonOrderQty').on('change', function () 
             var dataArr = [];

                var rows_selected =  oTable.column(0).checkboxes.selected();
                if (typeof rows_selected != 'undefined') 
                    $.each(rows_selected, function(index, rowId)
                         dataArr.push(rowId);
                    );
                
                for(var i=0;i<dataArr.length;i++) 
                    $( "#ordQty" + dataArr[i] ).change(function() 
                        alert($("#ordQty" + dataArr[i]).val);
                        validateOrderQty( dataArr[i]);
                    );
                
         );
    

);
oTable.rows().remove().draw();
$.each(obj, function(index, key) 
    var ordrSrchResultData = [];
    var finalLeadTime = calculateLeadTime(key.fopLeadTime);
    var unitPrice = key.quote;
    if(key.um == 'CPC') 
        unitPrice = key.quote/100;
    
    ordrSrchResultData.push(index);
    ordrSrchResultData.push('<input id="po' + index
                + '" type="text" maxlength="12" class="checkoutText" value="' + key.poNo + '"/>');
    ordrSrchResultData.push('<input id="ordQty' + index
            + '" type="text" class="checkoutText commonOrderQty" value="' + key.orderQty + '"/>');
    ordrSrchResultData.push('<input id="boxQty' + index
            + '" type="text" class="checkoutText" value="' + key.boxQty + '"disabled/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
                + '" value="'  + key.dueDate + '" readonly="readonly"/>');          
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
                + '" value="'  + finalLeadTime + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input id="partNo' + index
            + '" type="text" class="checkoutText" value="' + key.partNo + '"disabled/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="suppPartNo' + index
                + '" value="' + key.suppPartNo + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="extPrice' + index
            + '" value="' + key.extPrice + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="customerCd' + index
            + '" value="' + key.customerCd + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="quote' + index
            + '" value="' + unitPrice + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="hidden" value="'+key.dueDate+'" id="existDatePicker'+index+'"');
    oTable.columns.adjust().draw();
    oTable.row.add(ordrSrchResultData).draw();
    localStorage.setItem('_selectedStartDate', finalLeadTime);
    updateDatepicker(index, finalLeadTime);
    $('#checkoutTable tr:last').attr('id', 't' + index);
    $("#" + 't' + index).removeClass('selected');
    $( "#ordQty" + index ).change(function() 
        validateOrderQty(index);
    );
);
$('#createOrderId').click(function ()      
    var dataArr = [];
    var rows_selected =  oTable.column(0).checkboxes.selected();
    $.each(rows_selected, function(index, rowId)
      dataArr.push(rowId);
      );       
    var rowsCount = dataArr.length;
    var errMsg = $("#noSelectedDataErrMsg").val();      
    if(rowsCount == 0) 
        jQuery("label[for='ordlabelvalue']").html(errMsg);
        $('#orderErrorModal').modal('show');
        return;
    
    createOrder(dataArr);
);

【问题讨论】：

@ramsbh，如果我的回答对您有所帮助，请将其标记为已接受以关闭此线程或将 cmets 与您的问题相关。谢谢，

【参考方案1】：

代替：

$('#createOrderId').click(function ()

使用这个：

 $(document).on('click','#createOrderId',function ()

【讨论】：

不，这不起作用我也想验证 po no，所以如果我拾取第二页值 $('po10').val() ，它会抛出未定义。我的要求是当我点击提交时，所有验证都应该在所有页面上完成。