我修改Kendo UI Grid Data後jquery返回一個錯誤

我有一個Kendo Grid，用於返回一個Grid，每個Grid中都有複選框。這些複選框的用途是在按下按鈕後添加具有已選中複選框的每行的餘額金額並處理餘額總額。我修改Kendo UI Grid Data後jquery返回一個錯誤

這是我如何做到這一點：

function getData() { 
return [ 
    { accountNumber: "28495", transactionNumber: "2440", TransType: "INV", TransReferenceNumber: "11867115", transactionDate: "6/18/2013", transactionDebitAmount: "1920.20", openBalance: "1920.20", discountAmount: "93.60", discountApplied: "0.00", dueDate: "8/17/2013", paymentApplied: "0.00" }, 
    { accountNumber: "12495", transactionNumber: "1430", TransType: "INV", TransReferenceNumber: "11867225", transactionDate: "1/18/2011", transactionDebitAmount: "27620.20", openBalance: "1920.20", discountAmount: "111.60", discountApplied: "0.00", dueDate: "2/12/2013", paymentApplied: "0.00" }, 
    { accountNumber: "18495", transactionNumber: "1440", TransType: "INV", TransReferenceNumber: "11867115", transactionDate: "5/9/2013", transactionDebitAmount: "13320.20", openBalance: "1920.20", discountAmount: "93.60", discountApplied: "0.00", dueDate: "8/17/2013", paymentApplied: "0.00" } 
      ]; 
} 



var grid; 
var dataSource; 
var data; 

function drawInvoiceTable() { 
    invoiceTable = $('#invoiceGrid').kendoGrid({ 
     sortable: true, 
     pageable: true, 
     dataSource: { 
      data: getData(), 
      pageSize: 10, 
      schema: { 
       model: { 
        id: 'test', 
        fields: { 
         active: false 
        } 
       } 
      } 
     }, 
     columns: [ 
      { template: "<input type='checkbox' id='chkInvoices' class='invoiceDisplay' name='chkInvoices' #= active ? checked='checked' : '' #/>", width: 30 }, 
      { field: 'accountNumber', title: 'Account', attributes: { 'class': 'accountnumber' }, sortable: true }, 
      { field: 'transactionDate', title: 'Trans Date', attributes: { 'class': 'transdate' }, width: 100, sortable: true }, 
      { field: 'TransType', title: 'Type', attributes: { 'class': 'transType' }, width: 60, sortable: true }, 
      { field: 'TransReferenceNumber', title: 'Reference Number', attributes: { 'class': 'refnumber' }, width: 135, sortable: true }, 
      { field: 'transactionDebitAmount', title: 'Amount', attributes: { 'class': 'amount' }, width: 90, sortable: true }, 
      { field: 'openBalance', title: 'Balance', width: 90, attributes: { 'class': 'balance' }, template: '#= kendo.format("{0:p}", openBalance) #', sortable: true }, 
      { field: 'discountAmount', title: 'Discount', format: "{0:c}", attributes: { 'class': 'discount', 'data-format': 'c' }, width: 90, sortable: false }, 
      { field: 'discountApplied', title: 'Discount Applied', width: 95, attributes: { 'class': 'discapplied' }, sortable: false }, 
      { field: 'paymentApplied', title: 'Payment Applied' , width: 95, attributes: { 'class': 'paymentapplied' }, sortable: false }, 
      { field: 'discountDate', title: 'Discount Date', attributes: { 'class': 'discountDate' } }, 
      { field: 'dueDate', title: 'Due Date', width: 90, sortable: true }    
     ] 
    }); 

    grid = $('#invoiceGrid').data('kendoGrid'); 
    dataSource = grid.dataSource; 
    data = dataSource.data(); 
    } 

$('.invoiceDisplay').on('change', function(e) { 
    var idx = $(e.target).closest('tr').prevAll().length; 
    var currentRow = data[idx]; 
    if(currentRow.active) { 
     return; 
    } 
    var temp = currentRow.transactionDebitAmount; 

    currentRow.set('active', true); 
    currentRow.set('transactionDebitAmount', "0.00"); 
    currentRow.set('paymentApplied', temp); 
    $("input[type='text']").val(temp); 
});

我做更多的操作，但給你一個想法，看看這個小提琴here

我點擊它會通過代碼精細的複選框後，然後在jQuery是返回以下錯誤：

Uncaught TypeError: Cannot read property 'nodeName' of null

來源

2013-09-10 Data Crusader

您的代碼在Firefox上適合我。你使用的是什麼瀏覽器？ –

我正在使用Chrome！和jquery 1.8。我注意到，在小提琴中，更改事件處理程序只發生一次！在我的代碼中，處理程序發生的次數與我檢查checbox的次數相同，但在控制檯上得到相同的異常 –

使用這個代替：

$('#invoiceGrid').on('change', '.invoiceDisplay', function (e) { ... });

我認爲情況是，您要添加一個單擊處理程序到每一個人.invoiceDisplay複選框，但是當你.set()的一些數據項屬性的值，它會觸發對DataSource一個change事件。這會導致網格刷新以顯示更新後的數據，該數據重新創建行HTML元素，並丟失點擊處理程序（因爲它們是新元素）。

上述新的JavaScript增加了一個單一的點擊處理程序的#invoiceGrid元素，並具有子選擇器只爲.invoiceDisplay項目，但因爲它是對電網本身，你不鬆單擊處理程序。

來源

2013-09-10 22:22:28 CodingWithSpike

我修改Kendo UI Grid Data後jquery返回一個錯誤

回答

相關問題