Question

I am very new to web development. I am currently using tablesorter jquery plugin to create a dynamic table, where the user can add and delete rows. I am having trouble with changing the background color of newly created rows upon clicking. It works fine with rows that are hard coded in html. Here is the relevant code:

$(document).ready(
    function() {
        $('table.tablesorter td').click(
            function (event) {
                $(this).parent('tr').toggleClass('rowclick');
                $(this).parent('tr').siblings().removeClass('rowclick');
        });
    }
)

rowclick is a CSS class here:

table.tablesorter tbody tr.rowclick td {
    background-color: #8dbdd8;
}

I have tried adding the following to my Javascript function that adds a new row:

var createClickHandler = 
        function(newrow) {
            return function(event) {
                //alert(newrow.cells[0].childNodes[0].data);
                newrow.toggleClass('rowclick');
                newrow.siblings().removeClass('rowclick');
            };
        }
row.onclick = createClickHandler(row);

The alert correctly displays the text in the first column of the row when I click the new row. However, my new rows do not respond to the CSS class. Anyone have any ideas?

I should also mention that I have updated the tablesorter before applying the clickHandler with:

$("#TASKTABLE").trigger("update");
$("#TASKTABLE").trigger("appendCache");

Answer 1

Delegate your clickable td elements like:

$('table.tablesorter').on('click','td', function(){

using .on() from jQuery 1.7:

As of jQuery 1.7, the .on() method provides all functionality required for attaching event >handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), >and .live(). To remove events bound with .on(), see .off(). To attach an event that runs >only once and then removes itself, see .one()