1

我有以下标记(我无法控制,必须保持原样,但是可以操纵 JavaScript。)

http://jsbin.com/uyifu3/edit

我想要完成的是,当单击表格行时,会自动单击“Toggle Me Here”链接。

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

因此,单击表格行中的任何位置(减去实际单击链接本身)应该单击该链接,该链接将切换红色框。单击独立于表行的链接应正常切换红色框,而无需调用被触发的“selectedRow”单击事件。

4

5 回答 5

2

免责声明,以下答案不是最佳解决方案。如果可能的话,使用不显眼的处理程序使用@karim的解决方案。

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

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

你可以在这里测试它,它只是检查点击不是来自锚点。如果是这种情况,它已经完成了它需要做的事情,click冒泡到该行的事件应该不采取任何行动。

于 2010-07-19T23:40:18.597 回答
1

正在发生的事情(我认为)是,当您单击锚点时,事件会冒泡并触发绑定到行的事件。我建议按如下方式绑定到锚点:

  $('.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点击事件,我添加了一个警报)。

于 2010-07-19T23:23:18.107 回答
0
$('tr').click(function(){
    $('#box').toggle();
});

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

于 2010-07-19T23:29:08.893 回答
0

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

$(e.target).parents('tr').first().find('td:last a').click();
于 2010-07-19T23:32:52.253 回答
0

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

这是实际代码

于 2010-07-19T23:39:52.550 回答