Jquery.Hover not working for dynamic Element

Question

Here is my code

$(".inboxfeedlist li").hover(function(e){alert('');}

This is not working for dynamically created elements, even i have use

$(".inboxfeedlist li").bind('hover',function(){})

is also not working, what's problem with code.

Can you simulate your situation as closely as possible on http://jsfiddle.net? — Purag, Nov 01 '11 at 20:22

score 40 · Accepted Answer · edited May 23 '17 at 12:13

40

live become deprecated at jQuery 1.9. We can use on with mouseenter and mouseleave events instead:

$(document).on("mouseenter", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/hover-btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/hover-btn-left.png')");
});

$(document).on("mouseleave", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/btn-left.png')");
});

For some reason I can't use hover with on. It simply doesn't work. But, from what I have read, hover is just an adaptation from mouseenter and mouseleave, so it is fine. (https://stackoverflow.com/a/4463384/1031340)

If you do not need to support IE6, I recommend you use :hover on your CSS (if it is a change only in CSS, how example above).

edited May 23 '17 at 12:13

Community

1
1

answered Mar 13 '13 at 18:18

eduardomozart

1,444
15
14

It's important to use "on" event on the element that wasn't dynamicly changed. – Dmitrii Malyshev Sep 09 '14 at 11:46
In some cases where we want to show/hide stuff, mouseenter/mouseleave combination works better for me – DIG Apr 29 '15 at 17:32
mouseover isn't the proper syntax, mouseenter should be used: http://api.jquery.com/on/#additional-notes – Facundo Colombier May 19 '16 at 13:12

score 3 · Answer 2 · answered Nov 01 '11 at 20:23

3

try live

$(".inboxfeedlist li").live('hover',function(){});

answered Nov 01 '11 at 20:23

swatkins

13,530
4
46
78

score 3 · Answer 3 · edited May 14 '13 at 15:59

3

Use the live method:

$(".inboxfeedlist li").live('hover', function(e){alert('');});

A side note hover does take two callback functions, did you mean mouseover

edited May 14 '13 at 15:59

Stephen

18,827
9
60
98

answered Nov 01 '11 at 20:25

topek

18,609
3
35
43

you learn something new everyday..., still wondering what the use case for this would be? Did not have a problem yet, that would have required this. – topek Nov 01 '11 at 20:28
I use it for when I toggle something like in `$(".menu li").hover(function(){$(".submenu",this).toggle()})`. Because toggle depends on the current state of the element, it can be used for the hover over and the hover out. – Joseph Marikle Nov 01 '11 at 20:31
Why does `.live('hover' ...` works but not `.hover` on a dynamic element? – borayeris Feb 06 '14 at 00:00
1

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). https://api.jquery.com/live/ – Vlad Vinnikov Apr 11 '14 at 20:23

score 1 · Answer 4 · answered Nov 01 '11 at 20:24

1

Use delegate or live to bind the events. This will make sure anything added dynamically will be bound to the event handler as well.

answered Nov 01 '11 at 20:24

Sam

15,336
25
85
148

score 1 · Answer 5 · answered Nov 01 '11 at 20:24

1

Sounds like you need live or delegate. Delegate is prefered

$(document.body).delegate(".inboxfeedlist li", "hover", function(){
        alert('');
});

answered Nov 01 '11 at 20:24

Joseph Marikle

76,418
17
112
129

score 0 · Answer 6 · edited Jan 08 '14 at 13:19

0

You could use something like this:

$(document).on('mouseover','div.cover-wrapper',function(){
    $(this).css({'border':'1px solid #000'});
});


$(document).on('mouseout','div.cover-wrapper',function(){
    $(this).css({'border':'none'});
});

edited Jan 08 '14 at 13:19

display-name-is-missing

4,424
5
28
41

answered May 23 '13 at 15:13

Sandeep Pal

2,067
1
16
14

score 0 · Answer 7 · answered Jan 29 '19 at 05:56

Here is the use and details of these functions

http://api.jquery.com/live/

$( selector ).live( events, data, handler ); // jQuery 1.3+

$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+

$( document ).on( events, selector, data, handler ); // jQuery 1.7+

score 0 · Answer 8 · answered Nov 01 '11 at 20:24

0

$('.inboxfeedlist li').live('hover', function(e) { alert(''); });

jQuery live

jQuery delegate

answered Nov 01 '11 at 20:24

jbabey

45,965
12
71
94

Jquery.Hover not working for dynamic Element

8 Answers8

Linked