Question

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

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

我一直在寻找自己进入当前设置的递归循环。

因此，单击表格行中的任何位置（减去实际点击链接本身）应该单击那里的链接以切换红色框。单击与表格行无关的链接应该正常切换红色框，而不调用被激活的“selectedRow”点击事件。

Answer 1

免责声明，以下答案不是最佳解决方案。如果可能的话，使用不引人注目的处理程序使用@karim的解决方案。

如果他的解决方案是不选项，例如这个链接是由某个东西自动生成的，那么你可以这样做：

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

You can test it here，它只是检查点击是否首先来自锚点。如果是这种情况，它就完成了它需要做的事情，冒泡到行的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处理程序的a）。

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

这是code in action。

jQuery单击表行切换部分

5 个答案: