What is the correct syntax for `.live()` binding of the 'hover' method?

Question

We call a .live() method like this:

$('.link').live('click', loadContent);

But what about if I'm binding to hover instead, which calls for two functions separated by a comma? When I put in this:

$('.thumb.dim').live('hover', function(){$(this).removeClass('dim');}, function(){$(this).addClass('dim');});

The mouseenter event does trigger the first function above (removeClass('dim')), but on mouseleave nothing happens. Is there a correct way to write this?

Answer 1

live only takes one callback, but you can check the passed event information for the type of the callback:

$('.thumb.dim').live('hover', function(e) {
    if (e.type == 'mouseover') {
        $(this).removeClass('dim');
    } else {
        $(this).addClass('dim');
    }
});

Alternatively since you're just removing/adding a class, you can do;

$('.thumb.dim').live('hover', function(e) {
    $(this).toggleClass('dim');
});

Answer 2

Guess - I don't know how jQuery does this internally.

Could it be that the event doesn't get triggered because it's no longer dim? You could try adding a dim_disabled class or similar and a mouse-out event for dim_disabled to restore the dim?

Answer 3

Duh! The function is removing the class that triggers the function! Once the 'dim' class is removed on mouseenter, this no longer responds to a mouseout event!