jQuery click event on td row not firing.

Question

i have a simple bit of jQuery which displays the row below the current one if selected.

What I want if for all the <td> elements but one to fire this method.

Works on whole <tr> row

        $(document).ready(function(){

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

want to do something like (doesn't work)

    $(document).ready(function(){

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

Answer 1

In your non-working code, $(this) is a <td> element.

Therefore, $(this).next("#report tr") doesn't match anything. (Because the <td> element has no <tr> elements as siblings)

You need to change it to $(this).closest('tr').next("#report tr") to find the "uncle" element. You could also call .parent() instead of .closest('tr'), but calling .closest will keep working even if you bind the click handler to a child of the <td>.

Answer 2

You need something like this:

 $(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);
    });
});

Since you're clicking a td, need to go up to the row before trying to get the next row. Also this selector should work the same in most cases: #report td.selected. Since you can't escape being inside the #report with a sibling, #report tr can also be just tr in your next().