单元格单击事件仅在Kendo UI网格中发生一次 [英] Cell click event only happens once in kendo ui grid
本文介绍了单元格单击事件仅在Kendo UI网格中发生一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个绑定到单元格的click事件，但是单击事件仅从第一行触发一次，当我逐步执行dataBound事件时，它会自行附加，但是仅触发一次
I have a click event being bound to a cell, but the click event only fires once from the very first row, when I step through the dataBound event it attaches itself, but only fires the one time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
dataBound: function(e) {
e.sender.tbody.find('td:eq(1)').on('click', function(e) {
console.log("I was clicked");
});
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0, 0, 0, .2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
推荐答案
而不是dataBound事件，而是通过column.attributes向该单元格添加一个类，然后使用事件委托来处理具有该类的所有单元格上的click事件:
Instead of the dataBound event, add a class to the cell via column.attributes and then use event delegation to handle the click event on all cells with that class:
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title",
attributes: {
"class": "CellClickHandler",
}
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
$(document).on('click', '.CellClickHandler', function(e){
console.log("I was clicked");
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(this).closest('tr'));
console.log("Contact Title: ",dataItem.ContactTitle);
});
这篇关于单元格单击事件仅在Kendo UI网格中发生一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
