Question

我对网络开发很陌生。我目前正在使用tablesorter jquery插件来创建动态表，用户可以在其中添加和删除行。我在点击时更改新创建的行的背景颜色时遇到问题。它适用于在html中硬编码的行。以下是相关代码：

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

rowclick是一个CSS类：

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

我尝试将以下内容添加到添加新行的Javascript函数中：

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);

当我单击新行时，警报会正确显示行第一列中的文本。但是，我的新行不响应CSS类。有人有主意吗？

我还应该提一下，在将clickHandler应用于：

之前，我已经更新了tablesorter

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

Answer 1

委派您的可点击td元素，例如：

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

使用jQuery 1.7中的.on()：

从jQuery 1.7开始，.on（）方法提供了附加事件＆gt;处理程序所需的所有功能。有关从旧的jQuery事件方法转换的帮助，请参阅.bind（）,. delegate（），＆gt;和.live（）。要删除与.on（）绑定的事件，请参阅.off（）。要附加仅运行一次然后自行删除的事件，请参阅.one（）

Answer 2

试试这个：

$(newrow).toggleClass('rowclick');
$(newrow).siblings().removeClass('rowclick');

使用新创建的行的Javascript tr click事件（正在更新css）

2 个答案: