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-16 20:47:58Z

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

I understand that, but what about the background-color for the odd rows?
Check my edited answer I have added the required style for row background color.
In that case, when you update the table you can just call this line $("#tab3 tbody tr:odd").css("background-color", "#DCF1FD");
@Radi - If it is all fine please mark it as an answer whenever you can thanks.

Community · Accepted Answer · 2017-05-23 12:26:54Z

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, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 16, 2011 at 20:44

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

3 Comments

bfavaretto Over a year ago

No, not even IE9 according to this table. :(

bfavaretto Over a year ago

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.

Radi Over a year ago

I already know about these CSS selectors LINK.

Collectives™ on Stack Overflow

JavaScript Event Delegation without an actual event?

2 Answers 2

5 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Related