0

我正在使用一个 jquery 表插件，当您单击列标题时对行进行排序。我正在尝试实现一项功能，您可以通过单击标题内的“X”来删除列。我的标题看起来像<th><div class="remove-column">X</div>Total Cases</th> ，并且我在 remove-column 类上有一个单击事件侦听器。当我单击 X 时，不是像我想要的那样隐藏列，而是对行进行排序。

我的隐藏表格的功能甚至没有被调用。这可能是样式问题，还是完全其他问题？

为了清楚起见，需要更多代码。我也在使用 Backbone：

事件监听器

   events: {
      'click .remove-column': 'removeColumn'
    }

以及要调用的函数：

removeColumn: function(e){
    debugger
    var columnIndex = $(e.currentTarget).parent().index();
    $('table tr td:nth-child('+columnIndex+')')
  }

CSS(less) 看起来像这样：

   thead {
          tr {
            td, th {
              position: relative;
              .remove-column {
                position: absolute;
                right: 3px;
                opacity: 0.0;
              }
            }
          }
        }
4

2 回答 2

0

您需要阻止事件冒泡。用于e.stopPropagation()阻止事件冒泡。

$('.remove-column').on('click', function (e) {
   e.stopPropagation();
   //Your code
});
于 2013-01-03T18:29:58.043 回答
0

您需要preventDefault在排序方法的点击事件上使用，然后删除。类似于以下内容。

$(document).ready(function(){
    $('.remove-column').click(function(event){
        event.preventDefault();   //Stop the default action
        $(this).parent().remove();
    });
});

或者，您也可以查看event.stopPropagation方法或使用return false;来停止默认行为。

于 2013-01-03T18:35:14.497 回答