jQuery Click Table Row Toggle部分

免责声明,以下答案 不是最佳解决方案 . 与…同行 @karim 的解决方案,尽可能使用不引人注目的处理程序。

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

You can test it here ,它只是检查单击是否不是从锚点开始的。如果是这样的话,它已经完成了它需要做的事情 click

现在发生的(我认为)是,当你点击锚定时,事件冒出气泡并触发绑定到行的事件。我建议按以下方式绑定到锚上:

  $('.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

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

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

只需删除 toggleMe() 因此,基本上单击链接与单击行没有什么不同。只是为了作秀:)

我假设有不止一行(因为您将一个类用于 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