Question

我使用的是一个jquery表插件，可以在单击列标题时对行进行排序。我正在尝试实现一个功能，您可以通过单击标题内的“X”来删除列。我的标题看起来像<th><div class="remove-column">X</div>Total Cases</th> 我在remove-column类上有一个click事件监听器。当我单击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;
              }
            }
          }
        }

Answer 1

你需要阻止事件冒泡。使用e.stopPropagation()来阻止事件冒泡。

$('.remove-column').on('click', function (e) {
   e.stopPropagation();
   //Your code
});

Answer 2

您需要在排序方法的点击事件中使用preventDefault，然后删除。如下所示。

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

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

单击表标题内的div将单击父标题

2 个答案: