Come rendere jQuery 1.7 .on() hover?

Question

Sto riscontrando un problema con gli elementi creati dinamicamente sullo stato di hover. Quando passo il mouse sull'elemento html appena creato, non funziona.

Ecco il mio codice 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!'); 
}); 

Ho anche provato questo codice:

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

}); 

come mostrato qui http://api.jquery.com/on/, ma ancora senza fortuna. Ecco anche la demo: http://jsfiddle.net/BQ2FA/

Answer 1

Questa non è la sintassi corretta.

Utilizzare questo per ascoltare i vostri eventi per creata dinamicamente '.hover' elementi:

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

Answer 2

Si utilizza .on per vincolante diretta, è necessario utilizzare per la delega:

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

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