javascript - 标准功能工作正常，但如果委派 - 则不行

Question

这个问题已经有答案了:

How to delegate `hover()` function by using `on()` [duplicate] (1 个回答)

已关闭 3 年前。

这工作正常:

$('.rollwrap').hover(function() {
    $(this).find('.imgrollb').animate({'bottom' : 0});
    }, function() {
    $(this).find('.imgrollb').animate({'bottom' : '100%'});
    }
);

如果rollwrap并且其内容是动态添加的我需要委托(delegate)该函数，但这不起作用:

$(document).on('hover', '.rollwrap', function(){
    $(this).find('.imgrollb').animate({'bottom': 0});
    }, function(){
    $(this).find('.imgrollb').animate({'bottom': '100%'});
    }
);

如何获得与动态内容相同的功能？

Answer 1

传递给 .hover 的两个函数是 mouseenter 和 mouseleave 处理程序，因此您可以使用这些事件进行委托(delegate):

$(document).on('mouseenter', '.rollwrap', function(){
  $(this).find('.imgrollb').animate({'bottom': 0});
});
$(document).on('mouseleave', '.rollwrap', function(){
  $(this).find('.imgrollb').animate({'bottom': '100%'});
});