带有新创建行的 Javascript tr 点击事件（更新 css）答案

【问题标题】：Javascript tr click event with newly created rows (Updating css)带有新创建行的 Javascript tr 点击事件（更新 css）
【发布时间】：2018-09-08 05:13:57
【问题描述】：

我对 Web 开发非常陌生。我目前正在使用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 之前我已经更新了表格排序器：

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

【问题讨论】：

标签： javascript jquery css html-table

【解决方案1】：

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

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

使用 jQuery 1.7 中的 .on()：

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

【讨论】：

谢谢，现在很好用。这实际上是做什么的？为什么我以前的版本不起作用？
这是一个更新的 jQuery 方法，用于替换现在已弃用的 .live() 方法。实际所做的是等待存在的和 future 创建的td 元素，通过将点击事件委托给它们。在这里阅读更多：api.jquery.com/on

【解决方案2】：

试试这个：

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

【讨论】：

非常感谢！！！整天卡在这上面。 $() 实际上是什么意思。我以 0 html/javascript 经验直接进入了这个项目。
@yalechen 不客气，$() 是 jQuery 选择器，它返回一个 jQuery 对象，然后您可以使用 jQuery 方法来操作选定的元素。