Losing hover event when changing HTML via jQuery

I have a Fiddle example here: Fiddle example

I want to click on the div 7 and change the TD div. But when I do that, I seem to be losing the hover on the class altitudeList_colors. When I first run the script I can hover over the altitudes list, the 7 div and the 15 div and see the cursor change to a pointer.

However, I lose that as soon as I click on the 7 or the 15 div click. I no longer can hover and change the cursor to a pointer. I believe this is because when I replace the labels via the .html() call, the classes are not getting input, but I don’t see why this is happening?

Thank you…

Now for starters, for something as simple as making a class’ cursor a pointer, don’t use jquery. Define a CSS rule and call it a day. You’re using a sledgehammer to open a letter.

Right. You’re replacing the HTML. It’s not because your classes are missing, though.

What you need to do is delegate your hovers.

Think of it this way.

You put 4 cars on the lot.
You tell your staff “Paint these cars red.”
Your new stock arrives.
You get rid of the old cars, and put the new ones out.
The cars are not red.

You havent told them to paint now-and-future cars red. You’ve told them 'whatever cars currently exist, paint them red.

https://learn.jquery.com/events/event-delegation/ This is JQuery’s explanation of event delegation. Essentially, you’ll need to convert your event handlers to being delegated .on() invocations.

1 Like

Thank you very much!!