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.

Answer 1

"hover" pseudo-event

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"); 

Answer 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>