Как вызвать изменение в флажке или щелкнуть строку, чтобы выбрать строку таблицы?

Question

У меня есть таблица с флажками в первом столбце.

Строки могут быть выбраны либо (а) установив флажок, либо (б) щелкнув по строке. Выбранные строки должны быть выделены.

Моя проблема в том, что я могу заставить любого работать отдельно, но не вместе. Вот что у меня есть:

 // 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();

Чтобы предотвратить установку флажкаот нажатия на строку таблицы.