jQuery hover event handler not working on dynamic content while click does

Question

For dynamically created content, I am using the 'on' method to handle events. That works fine with click but not with hover.

Here is the code:

$(document).on('click', 'li', function(){
    alert('a');
});

Works but

$(document).on('hover', 'li', function(){
    alert('a');
});

does not.

Is the code wrong? Or the problem arises cause of something else on my setup.

Hover is no real js event, its a jquery function. Thats why its not working. — GDY
– GDY, Commented Dec 20, 2016 at 6:41
delgates don't support hover event use mouse enter, mouse leave event . $(document).on(mouseenter: function(){}, mouseleave: function{}, 'li'); — Nadeem
– Nadeem, Commented Dec 20, 2016 at 6:44

Satpal · Accepted Answer · 2016-12-20 06:44:37Z

4

As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave"

You need to use mouseenter and mouseleave event

$(document).on('mouseenter', 'li', function(){
    alert('a');
});
$(document).on('mouseleave', 'li', function(){
    alert('a');
});

You can also use alternate syntax

$(document).on({
    mouseenter: function () {           
    },
    mouseleave: function () {           
    }}, "li");

answered Dec 20, 2016 at 6:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. didn't know that hover can not be used.

Sankar · Accepted Answer · 2016-12-20 06:41:59Z

2

Do not confuse the "hover" pseudo-event-name with the .hover() method

You should use mouseenter

$(document).on('mouseenter', 'li', function(){
    alert('a');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li>sdada</li>
  </ul>

answered Dec 20, 2016 at 6:41

Sankar

7,1772 gold badges36 silver badges57 bronze badges