单击kendo ui网格标题中的自定义按钮时如何停止传播答案

【问题标题】：How to stop propagation when click to custom button in kendo ui grid header单击kendo ui网格标题中的自定义按钮时如何停止传播
【发布时间】：2014-04-17 07:46:42
【问题描述】：

我有一个剑道网格。我使用 headerTemplate 将自定义按钮添加到列标题。

$("#grid").kendoGrid({
  sortable: true,
  columns: [
      {
          field: 'test',
          title: 'My test',
          headerTemplate: '<span class="column-edit fa fa-pencil"></span>'
      },
      {
          field: 'my_column',
          title: 'My column'
      }
  ],
  dataSource: [
      {test: '3', my_column: 4}, 
      {test: '4', my_column: 4}, 
      {test: '6', my_column: 2}, 
      {test: '7', my_column: 1}, 
      {test: '7', my_column: 9}
  ]
});
$(document).on('click', '.column-edit', function(e){
    e.stopPropagation();
    e.preventDefault();
    alert('edit');
});

This is my fiddle

我的问题是：当用户点击铅笔图标时如何防止排序触发？我的代码没有按预期工作。

非常感谢，

阮安

【问题讨论】：

标签： javascript jquery kendo-grid

【解决方案1】：

尝试在您的anchor tag 上使用off()，

$('.column-edit').closest('a').off('click').on('click', function(e){
    e.stopPropagation();
    e.preventDefault();
    alert('edit');
});

Demo

【讨论】：

谢谢，但这似乎确实禁用了排序功能
去掉off()试试
我认为您的代码会将事件绑定到锚点。我的期望是在单击铅笔时防止锚触发。
在我的情况下，列是动态添加的，那么您的代码将无法正常工作。感谢您的支持！

【解决方案2】：

$('.column-edit').closest('a').off('click').on('click', function(e){
    alert('edit');
    return false
});

【讨论】：

【解决方案3】：

点击您的标题而不进行排序

我遇到了同样的问题。网格似乎还没有准备好。我尝试使用 (closest('a')) 但这没有帮助。我添加了一个文本框，因此以下代码成功：

function gridDataBound() {
    fadeInContent();
    setTimeout(function () {
       // Prevent sort when filter is clicked.
       $("input.search-filter").on('click', function(e) {
           e.stopPropagation();
           e.preventDefault();
       });
   }, 200);
}

超时对我来说是 80 岁。但低于这个时间的网格还没有填满数据。我可能会在 300 毫秒之前完成，但在那之后我认为用户会频繁点击太早。

最好在动态控件创建时添加处理程序。

【讨论】：