Question

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;
});

Thanks!

Answer 1

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:

$(document).on({
    mouseenter: function () {
        mouse_is_inside = true;
    },

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