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?

munch · Accepted Answer · 2010-04-22 01:11:17Z

3

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.

answered Apr 22, 2010 at 1:11

munch

6,3214 gold badges26 silver badges27 bronze badges

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

1 Comment

Dave Over a year ago

I love you :). Thank you very much!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related