Wie macht man jQuery 1.7 .on() Hover?

Question

Ich habe ein Problem mit dynamisch erstellten Elementen im Hover-Status. Wenn ich den Mauszeiger über ein neu erstelltes HTML-Element halte, funktioniert es nicht.

Hier ist mein HTML-Code:

<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!'); 
}); 

ich diesen Code auch versucht:

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

}); 

wie hier http://api.jquery.com/on/ gezeigt, aber noch kein Glück. Hier ist auch Demo: http://jsfiddle.net/BQ2FA/

Answer 1

Dies ist nicht die richtige Syntax.

verwenden, um Ihre Veranstaltungen zu hören für Elemente ‚.hover‘ dynamisch erstellt:

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

Answer 2

Du .on für die direkte Bindung verwenden, müssen Sie es für die Delegierung verwenden:

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

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