[FIXED] How do I pass additional parameters to the handlers in $.fn.hover()?

Issue

The documentation of jQuery's hover shows only one method of using the function:

$('.myClass').hover(function () {
    console.log('on mouse over');
},
function () {
    console.log('on mouse out');
});

However, when you change these to named functions it doesn't work correctly, firing the named functions upon page load (or as soon as you paste it into your console):

function onMouseOver() {
    console.log('on mouse over');
}

function onMouseOut()
    console.log('on mouse out');
}

$('.myClass').hover(onMouseOver(), onMouseOut());

Changing the last line to:

$('myClass').hover(onMouseOver, onMouseOut);

works as expected (firing on the event), but doesn't allow me to pass anything to the named functions. Is there any way to allow me to pass a variable to the functions?

Solution

Yes you need to use anonymous functions for this:

$('myClass').hover(function( e ) {
    onMouseOver( param1, param2... );
}, function( e ) {
    onMouseOut( param1, param2... );
});

Answered By - antyrat

Answer Checked By - Senaida (PHPFixing Volunteer)