Why hover() does not working on added class using jquery?

Question

I'm trying to delay the animation, for this task i'm adding .startAnimation class after 500 milliseconds for animation.

HTML

<div class="layout">Hover It</div>
<div class="hoverDiv"></div>

JS

setTimeout(function(){
            $(".layout").addClass('startAnimation');
        }, 500);
$('.hoverDiv').hide();
$('.startAnimation').hover(function(){
    $('.hoverDiv').show();
});

But problem is that hover() does not working with added class .startAnimation however its working with .layout class which is located on the same div. I checked .startAnimation class is adding properly after 500 milliseconds. Can any one guide me regarding this issue that i can fix it. I will appreciate.

Here is reference Demo

Use event delegation with `mouseenter` and `mouseleave` events — Arun P Johny, Apr 19 '16 at 11:24
Dynamically created elements you should to use "on or live" method. — krishna, Apr 19 '16 at 11:27

rrk · Accepted Answer · 2016-04-19T11:27:16.233

1

Use event delegation with mouseenter, mouseleave events.

$(document).on('mouseenter mouseleave', '.startAnimation', function(){
    $('.hoverDiv').toggle();
});

DEMO

edited Apr 19 '16 at 11:27

answered Apr 19 '16 at 11:22

rrk

15,677
4
29
45

Hover is not an event, it is used for adding mouseenter and mouseleave handlers – Arun P Johny Apr 19 '16 at 11:24
@ArunPJohny I changed that. – rrk Apr 19 '16 at 11:25
@RejithRKrishnan Thanks for sharing knowledge its working. – Ayaz Ali Shah Apr 19 '16 at 11:26

score 0 · Answer 2 · answered Apr 19 '16 at 11:25

0

Use mouseover event instead of hover. It will work.

$(document).on('mouseover', '.startAnimation', function(){
    $('.hoverDiv').show();
});

answered Apr 19 '16 at 11:25

Dhara Parmar

8,021
1
16
27

Why hover() does not working on added class using jquery?

HTML

JS

2 Answers2