jQuery 单击表行切换部分

Question

我有以下标记（我无法控制，必须保持原样，但是可以操纵 JavaScript。）

http ://jsbin.com/uyifu3/edit

我想要完成的是，当单击表行时，会自动单击“在此处切换我”链接。

我不断发现自己在当前设置下陷入了递归循环。

因此，单击表行中的任意位置（减去实际单击链接本身）应该单击将切换红色框的链接。单击独立于表行的链接应正常切换红色框，而不调用触发的“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 （点击锚点将< em>没有触发.selectedRow点击事件，我向其中添加了警报）。

Answer 3

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

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

Answer 4

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

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

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() 锚点并使整行可单击。

这是实际代码。