单元格单击事件仅在剑道 UI 网格中发生一次答案

【问题标题】：Cell click event only happens once in kendo ui grid单元格单击事件仅在剑道 UI 网格中发生一次
【发布时间】：2019-11-16 06:34:24
【问题描述】：

我有一个点击事件被绑定到一个单元格，但点击事件只从第一行触发一次，当我单步执行 dataBound 事件时，它会自行附加，但只会触发一次

<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>

【问题讨论】：

我不确定，因为虽然我使用过其他 Telerik 产品，但我没有使用过这个。但是假设他们的事件命名相似，我认为您的问题可能是您正在使用仅发生一次的整个网格的数据绑定事件。它不会发生在每一行。结合您的选择器仅限于此处给出的第二个 td 的事实 find('td:eq(1)') 它仅将点击关联到该一个 td 元素。所以整个网格中只有一个 td 元素受到影响。
@J.Schmale，啊，你是对的，一旦我将它放入一个循环中以附加到每一行的单元格，它就会起作用。感谢dataBound事件的提醒
@Chris 你是说你想让整行都可以点击吗？

标签： jquery kendo-ui kendo-grid

【解决方案1】：

通过 column.attributes 向单元格添加一个类，而不是 dataBound 事件，然后使用事件委托来处理具有该类的所有单元格上的单击事件：

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

【讨论】：