如何使jQuery 1.7 .on（）hover？

我在hover状态下动态创建元素时遇到问题。 当我将鼠标hover在新创建的html元素上时，它不起作用。

这是我的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!'); }); 

我甚至试过这段代码：

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

如图所示http://api.jquery.com/on/ ，但仍然没有运气。 这里也是演示： http ： //jsfiddle.net/BQ2FA/

Answer 1

这不是正确的语法。

使用它来监听动态创建的“.hover”元素的事件：

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

Answer 2

您正在使用.on进行直接绑定，您需要将其用于委派：

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

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