javascript - 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等（在上面的点击处理程序中使用）：

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

在这里试试：http: //jsbin.com/uyifu3/7/edit（点击锚点不会触发.selectedRow点击事件，我添加了一个警报）。

Answer 3

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

并且只需删除任何功能，toggleMe()以便从本质上单击链接与单击行没有什么不同。它只是为了展示:)

Answer 4

尝试退回到一个共同的父级（本示例中的 row/tr），然后向下钻取到目标（带有 onclick 处理程序）。

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

Answer 5

我假设有不止一行（因为你正在使用一个类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()锚点并使整行可点击。

这是实际代码。