如何触发复选框的更改或单击行以选择表格行？

Question

我在第一列有一个带有复选框的表格。

可以通过 (a) 选中复选框或 (b) 单击行来选择行。应突出显示选定的行。

我的问题是我可以让任何一个单独工作，但不能同时工作。这是我所拥有的：

 // click on row      
 $('table tbody tr').click( function() {
    $(this).find( "th input:checkbox").trigger('change');
    // $(this).find( "th input:checkbox").trigger('click');
});

 // change listener
 $('.tr input:checkbox').live( "change", function () {
    console.log("change triggered");

  var row = $(this).closest('tr');

  if ( $(this).attr('checked') == "checked" ) {
          row.addClass( 'ui-btn-hover-c' ).removeClass( 'row_selected ui-btn-up-e' )
          } else {
              row.addClass('row_selected ui-btn-hover-e' ).removeClass( "ui-btn-up-c");
          }
  });   

我以为我只会将 TR 上的点击路由到复选框更改处理程序，因此只有一个地方可以检查选定的行并处理类添加/删除。

但是我无法让它工作。以上以某种方式创建了一个无限循环，我不知道如何让它正常工作。

Answer 1

如果您在一行上有一个侦听器，并且在该行内的复选框上有另一个侦听器，那么当您单击复选框时，这两个侦听器都会被触发，除非您停止事件传播。即点击复选框也是点击tr。

通常你会使用event.stopPropagation();，但你不能在live()方法上使用它，因为事件已经传播了。

http://api.jquery.com/event.stopPropagation/

在您的情况下，如果您可以从使用 live 更改为使用 click，那么您可以使用：

event.stopPropagation();

防止点击复选框触发点击表格行。