jquery - 如何让 jQuery 1.7 .on() 悬停？

Question

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

这是我的 HTML 代码：

<button id="create">create new button</button>
<button class="hover">hover me</button>
<div></div>

jQuery：

var createBtn = $("#create");

createBtn.click(function() {
    $('div').append('<button class="hover">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/