[英]Click event on a post-AJAX drawn datatable not working from second page
[英]checkbox Click event is not working from second page in datatable?
我有一個數據表,並用Ajax響應填充。 我在頂部有一個提交按鈕,我想處理提交的單擊事件,我在每行中輸入文本框,下面的代碼僅適用於前10行,如果在數據表中單擊下一步按鈕,則提交($( '#createOrderId')。click)事件不起作用。 我嘗試在fndrawcallback中創建on change事件,但這也不起作用。 誰可以幫我這個事。
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);
});
代替:
$('#createOrderId').click(function (){
用這個:
$(document).on('click','#createOrderId',function (){
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.