jQuery Нажмите раздел переключения строк таблицы

Question

У меня есть следующая разметка (которая не контролируется и должна оставаться без изменений, однако JavaScript можно манипулировать.)

http://jsbin.com/uyifu3/edit

Что я пытаюсь сделать, так это то, что при щелчке строки таблицы автоматически нажимается ссылка «Toggle Me Here».

Я постоянно нахожу себя в рекурсивном цикле с текущей настройкой.

Таким образом, щелчок в любом месте строки таблицы (за исключением фактического нажатия на саму ссылку) должен щелкнуть ссылку, которая будет переключать красное поле. щелчок по ссылке, независимой от строки таблицы, должен переключать красное поле как обычно, не вызывая событие клика selectedRow.

Answer 1

Отказ от ответственности, приведенный ниже ответ не является оптимальным решением . Придерживайтесь решения @ karim , используя ненавязчивые обработчики, если это возможно.

Если его решением является , а не вариант, например, эта ссылка автоматически генерируется чем-то, тогда вы можете сделать это:

$(function() {
  $('.selectedRow').click(function(e) {
    if(e.target.nodeName != 'A')
      $(this).find('td:last a').click();
  });
});

Вы можете проверить это здесь , он просто проверяет, что щелчок не исходил с привязки в первую очередь. Если это так, то он сделал то, что должен, событие click, всплывающее до строки, не должно предпринимать никаких действий.

Answer 2

То, что происходит (я думаю), заключается в том, что когда вы нажимаете на якорь, событие всплывает и запускает тот, который привязан к строке.Я бы предложил привязку к привязке следующим образом:

  $('.toggleMe').click(function(e) {
      e.stopPropagation(); // prevent event from bubbling up the DOM tree
      $("#box").toggle();        
  });

Кроме того, удалите вызов встроенной функции из привязки и присвойте ему класс .toggleMe или такой (используется в описанном выше обработчике кликов):1005 *

<a class="toggleMe" href="#">Toggle Me Here</a>

Попробуйте здесь: http://jsbin.com/uyifu3/7/edit (нажатие на якорь не вызовет событие нажатия .selectedRow, к которому я добавил предупреждение).

Answer 3

Я предполагаю, что есть более одной строки (поскольку вы используете класс для TR). Этот код будет работать для вас:

$(document).ready(function(){
  // Remove the anchors
  $(".selectedRow td:last a").each(function(){
    $(this).replaceWith($(this).html());
  });

  // Make entire row clickable
  $(".selectedRow").click(function(e){
    $('#box').toggle();
  });
});

По существу, он удаляет якоря toggleMe() и делает весь ряд кликабельным.

Вот код в действии .

Answer 4

Попробуйте вернуться к общему родителю (строка / tr в этом примере), а затем перейти обратно к цели (a с обработчиком onclick).

$(e.target).parents('tr').first().find('td:last a').click();

Answer 5

$('tr').click(function(){
    $('#box').toggle();
});

и просто удалите любую функциональность для toggleMe(), чтобы по сути щелчок по ссылке не отличался от щелчка по строке.это просто для показа :) 1003 *