在对Kendo UI Grid Data进行更改后，jquery返回错误
我有一个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: "", 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); }); 我做了更多的操作，但想给你一个想法，看看这个小提琴
单击复选框后，它会完成代码，然后在jquery中返回以下错误：
Uncaught TypeError: Cannot read property 'nodeName' of null
改为使用它：
$('#invoiceGrid').on('change', '.invoiceDisplay', function (e) { ... });
我认为发生的是你为每个单独的.invoiceDisplay复选框添加一个点击处理程序，但当你.set()某些数据项属性的值时，它会触发DataSource上的一个change事件。 这会导致Grid刷新以显示更新的数据，从而重新创建行HTML元素，并丢失单击处理程序（因为它们是新元素）。
上面的新JavaScript为#invoiceGrid元素添加了一个单击处理程序，并且有一个子选择器只能运行.invoiceDisplay项目，但是你不会松开点击处理程序，因为它在网格本身上。