How to make jQuery 1.7 .on() hover?

Question

I\'m having a problem with dynamically created elements on hover state. When I hover on newly created html element, it doesn\'t work.

Here\'s my HTML code:

Answer 1

You are using .on for direct binding, you need to use it for delegation:

$('div').on({
    mouseenter: function() {
        alert('you hovered the button!');
    },
    mouseleave: function() {
        alert('you removed the hover from button!');
    }
}, ".hover");

http://jsfiddle.net/BQ2FA/2/

Answer 2

This isn't the correct syntax.

Use this to listen to your events for dynamically created '.hover' elements :

$(document).on('mouseenter', '.hover',  function(){
         alert('you hovered the button!');
}).on('mouseleave', '.hover', function() {
        alert('you removed the hover from button!');
});