standard function works fine but if delegated - does not

Question

this works fine:

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

if rollwrap and its content is added dinamically I need to delegate the function but this doesn't work:

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

How to get the same funcionality with dinamic content?

`hover` is not an event, it's a shortcut for two related events. `.on()` doesn't allow you to give multiple handler functions. — Barmar, Jan 11 '20 at 00:21
@Barmar I see, thanks, but is there any logical reason why the shortcut is allowed on static and not on dinamic content? — qadenza, Jan 11 '20 at 00:25
It's not allowed on static. `$(".rollwrap").on("hover", function() { ...}, function() {...})` doesn't work, either. — Barmar, Jan 11 '20 at 00:28

score 2 · Accepted Answer · answered Jan 11 '20 at 00:20

The two functions passed to .hover are mouseenter and mouseleave handlers, so you can delegate with those events instead:

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

standard function works fine but if delegated - does not

1 Answers1