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

Posted by Dave on Stack Overflow See other posts from Stack Overflow or by Dave
Published on 2010-04-22T01:07:51Z Indexed on 2010/04/22 1:13 UTC
Read the original article Hit count: 252

Filed under:
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about table