Combinación de funciones de jquery - on() hover/mouseenter/mouseleave

Question

Tengo una serie de elementos (vamos a llamarlos '.my-elementos') - algunos cargan en documentos listos, mientras que otros se cargan luego mediante un script de paginación.

Me gustaría establecer una variable según si el mouse está sobre estos elementos o no. El siguiente código funciona, pero sospecho que hay una mejor manera ... ¿Puedo hacerlo así que solo tengo que hacer referencia al DOM una vez?

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

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

Gracias!

Answer 1

Usted puede unirse a los dos juntos y compruebe la event.type :

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

O, si quieres mantenerlos separados, .on tiene una sintaxis diferente que toma un mapa de eventos:

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

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

Answer 2

Salida jQuery hover que es lo mismo que:

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

ACTUALIZACIÓN: Me he dado cuenta de que necesita para persistir los eventos a través del método de(). En ese caso, se puede usar un mapa de eventos, así:

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

Answer 3

También puede probar:

$(".my-elements").hover(function(eIn) { 
    // do work for mouse over 
}, 
function(eOut) { 
    // do work for mouse out 
}); 

actualización y corrección

se dieron cuenta de que necesita de bloqueo más dinámico en que caso Jonathan Lonowski o Derek Hunziker es perfecto

Answer 4

Casi todos los métodos jQuery ret objetos de urna, por lo que puede encadenar:

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

Answer 5

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

pero su general no es una buena idea tener una variable global incidating un estado evento

Answer 6

Para empezar, puede seleccionar sus elementos en lugar de documentos.

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

Usted podría intentar una anotación de acceso directo como esto ...

$('.my-elements').on('mouseenter mouseleave', function(){ 
    mouse_is_inside = !mouse_is_inside; 
}); 

Esto negar el valor cada vez que el ratón entra o sale, que debe mantener la variable mouse_is_inside establecido en el valor justo .