How do I selected a table row based on a dynamically added class name?

Question

I have a table where I select a row by clicking it.
On click, the class selected is added to the row.

Here is the code:

  // Change row background color on click
  jQuery('#rowList tr').live("click", function() {
    jQuery(this).closest("tr").siblings().removeClass("selected");
    jQuery(this).toggleClass('selected');
  });

Now, clicking another button, I need to get the title of the selected row. For testing, I'm trying to retrieve the entire row.

  jQuery('#fileBrowser input.addImage').live("click", function() {
    var tmp = jQuery("#rowList tr:selected").html();
    alert(tmp);
  });

But all I get is null. I'm guessing this is because the added class is not bound. I thought live kept track of dynamically added content, but I guess not.

How can I get this working?

Answer 1

Do this:

var tmp = jQuery("#rowList tr.selected").html();

You need to select the row by class using .selected, which uses the class-selector instead of the selected-selector, which only targets <option> elements that are selected.