添加了类上的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/

非常感谢SO

Answer 1

要使事件基于当前类触发元素,您需要使用事件委派.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