jQuery adding a row to a table with click() handler for tr

Question

I'm having an issue with a control I'm building that contains a table where the body is scrollable. The rows have a click() function handler established like:

    /**
     * This function is called when the user clicks the mouse on a row in
     * our scrolling table.
     */
    $('.innerTable tr').click (function (e) {
      //
      // Only react to the click if the mouse was clicked in the DIV or
      // the TD.
      //
      if (event.target.nodeName == 'DIV'  ||
          event.target.nodeName == 'TD'     ) {
        //
        // If the user wasn't holding down the control key, then deselect
        // any previously selected columns.
        //
        if (e.ctrlKey == false) {
          $('.innerTable tr').removeClass ('selected');
        }

        //
        // Toggle the selected state of the row that was clicked.
        //
        $(this).toggleClass ('selected');
      }
    });

There is a button that adds rows to the table like:

$('#innerTable > tbody:last').append('<tr>...some information...</tr>');

While the rows ARE added successfully, for some reason, the static rows work with the click handler, but the newly added rows do not. Is there something I'm missing?

Thanks in advance!

Answer 1

Try using .live() :

$('.innerTable tr').live('click', function (e) { ... });

It will bind the event handler to any current and future elements matching the selector added to the DOM.