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
$('table').on('click', 'tr', function ()
{ var state =
$(this).hasClass('highlighted');
$('.highlighted').removeClass('highlighted');
if (!state) { $(this).addClass('highlighted'); } });