jQuery addClass stopped working

Question

For some reason jQuery.addClass has stoped working. I have no idea why. Other stuff works though.

  // Change row background color on click
  jQuery('#rowList tr').live("click", function() {
    alert(jQuery(this).attr('title')); // Just here for testing. This works
    alert(jQuery(this).css('border','solid 1px red')); // Just here for testing. This works

    jQuery(this).closest("tr").siblings().removeClass("selected"); 
    jQuery(this).addClass("selected");  // NOT working
  });

Any reason why this is not working? Here is my HTML:

<table id="rowList">
  <tbody>
    <tr title="My title 1" class="imageItem odd"> <td>some stuff</td></tr>
    <tr title="My title 2" class="imageItem even"><td> some stuff here</td></tr>
  </tbody>
</table>

Answer 1

You have a missing ) on the second alert:

alert(jQuery(this).css('border','solid 1px red'));
                                               ^

Once you fix that it works, you can test it here . As an aside, since you're on a <tr> , there's no need for the .closest("tr") call, you can remove it from the chain, something like this overall:

CSS:

.bordered { border: solid 1px red; }

Script:

jQuery('#rowList tr').live("click", function() {
  alert(jQuery(this).attr('title'));
  jQuery(this).addClass("bordered selected")
              .siblings().removeClass("selected"); 
});​

You can give it a go here .

Answer 2

Because the way you've written it is the .addClass() adds the class to the td not the parent tr .

Unless the omission of closest('tr') was a typo?