JavaScript Event Delegation without an actual event?

Question

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!!!     
    $("#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

ShankarSangoli · Accepted Answer · 2011-08-16T20:47:58.893

1

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

edited Aug 16 '11 at 20:47

answered Aug 16 '11 at 20:32

ShankarSangoli

69,612
13
93
124

I understand that, but what about the background-color for the odd rows? – Radi Aug 16 '11 at 20:41
It can be easily controlled through css class – ShankarSangoli Aug 16 '11 at 20:44
Check my edited answer I have added the required style for row background color. – ShankarSangoli Aug 16 '11 at 20:48
In that case, when you update the table you can just call this line `$("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");` – ShankarSangoli Aug 16 '11 at 21:17
@Radi - If it is all fine please mark it as an answer whenever you can thanks. – ShankarSangoli Aug 16 '11 at 21:34

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

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

edited May 23 '17 at 12:26

Community

1
1

answered Aug 16 '11 at 20:44

bfavaretto

71,580
16
111
150

No, not even IE9 according to [this table](http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx). :( – bfavaretto Aug 16 '11 at 20:54
Sorry, I linked the wrong SO article. Will edit the link. What I meant was actually `:nth-child(even)` and `:nth-child(odd)`. IE support begins in IE9, I think. – bfavaretto Aug 16 '11 at 20:56
I already know about these CSS selectors [LINK](http://www.w3.org/Style/Examples/007/evenodd). – Radi Aug 16 '11 at 21:08

JavaScript Event Delegation without an actual event?

2 Answers2