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

Nick Craver · Accepted Answer · 2010-03-19 14:09:46Z

4

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().

answered Mar 19, 2010 at 14:09

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLaks · Accepted Answer · 2010-03-19 14:09:22Z

4

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>.

answered Mar 19, 2010 at 14:09

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Collectives™ on Stack Overflow

jQuery click event on td row not firing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related