单元格单击事件仅在kendo ui网格中发生一次

问题描述 投票:0回答:1

我有一个绑定到单元格的click事件,但是click事件仅在第一行中触发一次,当我逐步执行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>
jquery kendo-ui kendo-grid
1个回答
0
投票

代替dataBound事件,而是通过column.attributes向该单元格添加一个类,然后使用事件委托来处理具有该类的所有单元格上的click事件:

© www.soinside.com 2019 - 2024. All rights reserved.