Làm thế nào để làm cho jQuery 1.7 .on() di chuột?

Question

Tôi đang gặp sự cố với các yếu tố được tạo động trên trạng thái di chuột. Khi tôi di chuột trên phần tử html mới được tạo, nó không hoạt động.

Dưới đây là mã của tôi 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!'); 
}); 

Tôi thậm chí đã cố gắng mã này:

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

}); 

như đây http://api.jquery.com/on/, nhưng vẫn không có may mắn. Đây cũng là bản trình diễn: http://jsfiddle.net/BQ2FA/

Answer 1

Đây không phải là cú pháp chính xác.

Sử dụng này để lắng nghe sự kiện của bạn cho tự động tạo ra '.hover' yếu tố:

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

Answer 2

Bạn đang sử dụng .on cho trực tiếp ràng buộc, bạn cần phải sử dụng nó cho đoàn:

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

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