Combining jquery functions - on() hover/mouseenter/mouseleave

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

Answer 2

Check out jQuery hover which is the same as:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

UPDATE: I just realized you need to persist the events via the on() method. In that case, you can use an event map like so:

.on({     mouseenter: function() {         console.log('enter');     },     mouseleave: function() {         console.log('bye!');     } })