jQuery单击td行不发射事件

Question

我有一个jQuery的简单位，它显示当前行下方的行（如果选中）。

我想要什么，如果所有的<td>元素，但一个发射这种方法。

作品在整个<tr>排

 $(document).ready(function(){ 

     $("#report > tbody > tr.odd").click(function(){ 
      $(this).next("#report tr").fadeToggle(600); 
     }); 
    }); 

要像做（不工作）

$(document).ready(function(){ 

     $("#report > tbody > tr.odd > td.selected").click(function(){ 
      $(this).next("#report tr").fadeToggle(600); 
     }); 
    }); 

Answer 1

你需要的东西是这样的：

$(document).ready(function(){ 
    $("#report tr:not(.odd)").hide(); 
    $("#report tr:first-child").show(); 

    $("#report > tbody > tr.odd > td.selected").click(function(){ 
     $(this).closest("tr").next("tr").fadeToggle(600); 
    }); 
}); 

既然你点击一个TD，需要设法让下一行之前上到该行。这个选择器在大多数情况下也应该是相同的：#report td.selected。既然你无法逃脱与兄弟姐妹在#report之内，#report tr也可能只是tr在你的next()。

Answer 2

在你不工作的代码，$(this)是<td>元素。

因此，$(this).next("#report tr")不符合任何内容。 （因为<td>元素没有<tr>元素作为兄弟）

您需要将其更改为$(this).closest('tr').next("#report tr")才能找到“叔叔”元素。您也可以拨打.parent()而不是.closest('tr')，但即使您将click处理程序绑定到<td>的子项，仍会呼叫.closest继续工作。