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

Question

我有一个剑道网格。我使用 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

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

非常感谢，

阮英

Answer 1

尝试使用off()在您的 anchor 标记上，例如，

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

Demo