添加类的 addClass() 之后的 JQuery 函数

Question

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$('.calloutclosed').hover(function() {
    $(this).animate({"right" : "0px"}, 500);
}, function() {
    $(this).animate({"right" : "-260px"}, 500);
});

单击功能旨在“隐藏”标注框，然后，当悬停时，它将移回焦点。

为什么悬停功能不起作用？是因为它们都在 jQuery(function($){ }); 中吗？

我应该采取什么措施来纠正这个问题？

http://jsfiddle.net/R5Dmu/

非常感谢

Answer 1

要让事件根据当前类在元素上触发，您需要使用事件委托(delegate) .on() .

$('#closecallout').click(function() {
    $('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
});
$(document).on('mouseover', '.calloutclosed', function() {
    $(this).animate({"right" : "0px"}, 500);
}).on('mouseout', '.calloutclosed', function() {
    $(this).animate({"right" : "-260px"}, 500);
});

DEMO