Question

希望我的头衔不会太混乱。请告诉我是否有更好的方法来标题我的问题。
我有jQuery函数将背景颜色应用于表格中的奇数行并悬停时将颜色更改为红色。但是如果我动态编辑表，我的jQuery就不再起作用了。
我读了很多关于JS事件授权的内容，但没有找到任何关于如何在没有实际事件的情况下完成这项工作的信息......

$(document).ready(function(){
    //add background-color to all odd rows
    //very important!!!
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");
    //change color on hover 
    //less important!!!     
    $("#tab3 tbody tr").hover(
      function () {
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
      }
    );
});

在编辑表格后，有没有办法让它工作。

编辑：
这必须适用于IE8

Answer 1

在表上使用jQuery delegate即使您动态更新表行也会有效，因为事件附加到表而不是每行。

$(document).ready(function(){
    $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");


    $("#tab3").delegate('tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
    });
});

如果要动态更新整个表，请使用此

$(document).delegate('#tab3 tbody tr', 'hover', function(){
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
 });

您可以使用简单的css

设置奇数行的背景颜色

#tab3 tbody tr:nth-child(odd)
{ 
   background: #DCF1FD; 
}

Answer 2

...或者您可以使用CSS来定义偶数行，奇数行和悬停状态的背景。查看this question的第一个答案。（编辑：固定链接，它指的是错误的SO线程）。

没有实际事件的JavaScript事件委派？

2 个答案: