Javascript – Combining jquery functions – on() hover/mouseenter/mouseleave


I have a series of elements (lets call them '.my-elements') – some load on document ready, while others are loaded later via a pagination script.

I would like to set a variable according to whether or not the mouse is over these elements. The code below works, but I suspect there is a better way… Can I do this so I only have to reference the DOM once?

$(document).on('mouseenter','.my-elements', function(){
    mouse_is_inside = true;

$(document).on('mouseleave','.my-elements', function(){
    mouse_is_inside = false;


Best Solution

You can bind to both together and check the event.type:

$(document).on('mouseenter mouseleave', '.my-elements', function (ev) {
    mouse_is_inside = ev.type === 'mouseenter';

Or, if you want to keep them separate, .on has another syntax that takes an event map:

    mouseenter: function () {
        mouse_is_inside = true;

    mouseleave: function () {
        mouse_is_inside = false;
}, '.my-elements');