JavaScript Event Delegation without an actual event?

Hope my title is not too confusing. Please let me know if there is a better way to title my problem.

I have jQuery function applying background-color to the odd rows in a table and on hover change the color to red. But if I edit the table dynamically my jQuery does not work any more.

I read a lot about JS event delegation and could not find any information about how to make this work without having actual event...

$(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!!!   开发者_如何学C  
    $("#tab3 tbody tr").hover(
      function () {
        $(this).css("color", "red");
      },
      function () {
        $(this).css("color", "#000");
      }
    );
});

Is there a way to make it work after I edit the table.

EDIT:

This must work on IE8

use jQuery delegate on the table that will work even if you update the table rows dynamically because the event is attached to table and not each rows of it.

$(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");
    });
});

If you are updating the whole table dynamically then use this

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

You can set the background color of odd row with simple css

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

... Or you could just use CSS to define the backgrounds for even rows, odd rows and the hover state. Se the first answer to this question. (EDIT: fixed link, it was pointing the wrong SO thread).