Comment faire jQuery 1.7 .on () survoler?

J’ai un problème avec les éléments créés dynamicment en état de survol. Lorsque je survole un élément HTML nouvellement créé, cela ne fonctionne pas.

Voici mon code HTML:

create new button hover me 
 

jQuery:

 var createBtn = $("#create"); createBtn.click(function() { $('div').append('new hover button</button'); return false; }); $('.hover').hover(function() { alert('you hovered the button!'); }, function() { alert('you removed the hover from button!'); }); 

J’ai même essayé ce code:

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

comme indiqué ici http://api.jquery.com/on/ , mais toujours pas de chance. Voici aussi une démo: http://jsfiddle.net/BQ2FA/

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

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