在更改Kendo UI Grid Data后，jquery返回错误 [英] jquery returns an error after i make changes to Kendo UI Grid Data

问题描述

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

I have a Kendo Grid that I use to return a Grid that has check boxes in each rows. The purpose of those check boxes is to add the Balance amount of each row that has a checked check box and process the total Balance amount after I press a button.

我是这样做的：

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

我做了更多操作但是给你一个想法，看看这个小提琴这里

I do more operation but to give you an idea, look at this fiddle here

单击复选框后，它会完成代码，然后在jquery中返回以下错误：

After I click the checkbox it goes through the code fine, then in jquery the following error is returned:

Uncaught TypeError: Cannot read property 'nodeName' of null 

推荐答案

请改用：

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

我认为你要为每个人添加点击处理程序 .invoiceDisplay 复选框，但是当您 .set（）某些数据项属性的值时，它会触发更改 DataSource 上的事件。这会导致Grid刷新以显示更新的数据，这会重新创建行HTML元素，并丢失单击处理程序（因为它们是新元素）。

What I think happens is that you are adding a click handler to each individual .invoiceDisplay checkbox, but when you .set() the value of some of the data item properties, it triggers a change event on the DataSource. This causes the Grid to refresh to display the updated data, which recreates the row HTML elements, and looses the click handlers (since they are new elements).

新的JavaScript上面为 #invoiceGrid 元素添加了一个单击处理程序，并且有一个子选择器只能运行 .invoiceDisplay 项目，但是你没有松开点击处理程序，因为它在网格本身上。

The new JavaScript above adds a single click handler to the #invoiceGrid element, and has a sub selector to only run for .invoiceDisplay items, but you don't loose the click handler since it is on the grid itself.

这篇关于在更改Kendo UI Grid Data后，jquery返回错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！