触发内部元素上的单击事件

Question

需要单击每个第一个单元格包含链接的表格中的一行并打开一个URL.

<table>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td> 
    <td>more data</td>
  </tr>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td> 
    <td>more data</td>
  </tr>
  ...
</table>

完整的行应该是可点击的,而不是只有链接顶部打开fancybox中的详细信息页面,即在页面本身.

所以我试着这样做:

$("table tr").bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

但似乎事件正在冒泡,导致:

未捕获RangeError:超出最大调用堆栈大小

如何以正确的方式触发完整行而不是仅仅链接的单击以避免堆栈溢出？

更新:我真的很感谢下面的答案,但我的问题是关于触发事件,而不是执行该事件内的行为.解决方法可能很好,但在这种情况下不是.

Answer 1

这很好用:

$("table tr").click(function(e) {
    var $link = $(this).find("a");

    if (e.target === $link[0]) return false;

    $link.trigger('click');
    return false;
});

编辑:

为什么大多数解决方案都不起作用 - 它们会失败,因为当单击链接时,附加的直接处理程序会运行.然后该事件冒泡以查看处理程序是否附加到表格单元格,行等.

当你建议触发点击时你会导致递归:点击了链接→fancybox→bubbles→aha!表格行→触发链接点击→链接被点击...

当您建议停止传播时,请注意事件停止冒泡到父元素,因此click附加的处理程序body将不会被执行.

为什么上面的代码有效 - 我们检查事件是否从链接冒泡.如果是,我们只需返回并停止进一步传播.

查看更新的小提琴:http://jsfiddle.net/F5aMb/28/

Answer 2

尝试

$('table tr').click(function() {
  var href = $(this).find("a").attr("href");
    if(href) {
       window.location = href;
    }
});