jQuery Forum

Hi

I have a fairly big table and I am using the code below to highlight the row on click, if I click on another row it removes the first highlight and highlights the new row, it works fine,

The scroll/Ajax code is JScroll (jscroll.com)

Now the problem, I now only load the first x number of rows, then use a jquery script that loads more rows when I scroll down, it requires that the table is in a div, and the new rows are appended to the div on return from the script. Because of the way it works, I have to surround both the initially loaded rows in table tags, and the blocks of rows brought in by the Ajax call, also in table tags, resulting in multiple tables.

What happens now if only the table that is initially loaded works (highlights on click) but the newly added tables do not work.

I tink the problen is either that the tables are loaded after the on click code (which is at the bottom of the code page) or the code is not recognising multiple tables. I am pretty sure it is the first reason which is causing the second.

Can anyone help me with this?

Nick

1.     $('table').on('click', 'tr', function () {
           var state = $(this).hasClass('highlighted');
           $('.highlighted').removeClass('highlighted');
           if (!state) { $(this).addClass('highlighted'); }
       });