td行上的jQuery单击事件未触发答案

【问题标题】：jQuery click event on td row not firingtd行上的jQuery单击事件未触发
【发布时间】：2011-01-29 11:46:41
【问题描述】：

我有一个简单的 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);
        });
    });

【问题讨论】：

标签： javascript jquery html html-table

【解决方案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()。

【讨论】：

【解决方案2】：

在您的非工作代码中，$(this) 是一个 <td> 元素。

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

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

【讨论】：