javascript - 在我对 Kendo UI 网格数据进行更改后，jquery 返回错误

Question

我有一个 Kendo Grid，我用它来返回每行都有复选框的 Grid。这些复选框的目的是添加选中复选框的每一行的余额，并在我按下按钮后处理总余额。

这是我的做法:

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);
});   

我做了更多的操作，但为了给你一个想法，看看这个 fiddle here

在我点击复选框后，它通过代码正常，然后在 jquery 中返回以下错误:

Uncaught TypeError: Cannot read property 'nodeName' of null 

Answer 1

改用这个:

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

我认为发生的情况是您正在为每个单独的 .invoiceDisplay 复选框添加一个点击处理程序，但是当您 .set() 某些数据的值时项属性，它会触发 DataSource 上的 change 事件。这会导致 Grid 刷新以显示更新的数据，这会重新创建行 HTML 元素，并释放点击处理程序(因为它们是新元素)。

上面的新 JavaScript 向 #invoiceGrid 元素添加了一个单击处理程序，并且有一个仅针对 .invoiceDisplay 项目运行的子选择器，但您不需要松开点击处理程序，因为它位于网格本身。