Cómo hacer jQuery 1.7 .on() hover?

Question

Tengo un problema con los elementos creados dinámicamente en el estado de desplazamiento. Cuando cierro sobre el elemento html recién creado, no funciona.

Aquí está mi código 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!'); 
}); 

Incluso probé este código:

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

}); 

como se muestra aquí http://api.jquery.com/on/, pero aún ninguna suerte. Aquí también está la demostración: http://jsfiddle.net/BQ2FA/

Answer 1

Esta no es la sintaxis correcta.

Usar esta opción para escuchar sus eventos de forma dinámica creada '.hover' elementos:

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

Answer 2

está usando el .on para la unión directa, es necesario utilizarlo para la delegació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/