td行上的jQuery click事件未觸發

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

在你的非工作代碼中， $(this)是一個<td>元素。

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

您需要將其更改為$(this).closest('tr').next("#report tr")以查找“uncle”元素。 你也可以調用.parent()而不是.closest('tr') ，但是即使你將click處理程序綁定到<td>的子.closest ，調用.closest也會繼續工作。

Answer 2

你需要這樣的東西：

 $(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也可以只是你的next() tr 。