jQuery - convert .live() a .on()

Question

¿Cómo hago para combinar este viejo código jQuery en el v1.7 .on()?

v1.3 .live():

$('#results tbody tr').live({ 
    mouseenter: 
     function() { $(this).find('.popup').show(); }, 
    mouseleave: 
     function() { $(this).find('.popup').hide(); } 
    }); 

v1.7 .on():

$('#results tbody').on('mouseenter', 'tr', function() { 
    $(this).find('.popup').show(); 
}); 
$('#results tbody').on('mouseleave', 'tr', function() { 
    $(this).find('.popup').hide(); 
}); 

quiero pasar dos controladores de eventos a una .on() llamada, pero mantener la delegación de eventos brillante .on() me permite hacer.

Gracias!

Answer 1

se puede pasar un evento de mapa como el primer parámetro:

$('#results tbody').on({ 
    'mouseenter' : function() { 
     $(this).find('.popup').show(); 
    }, 
    'mouseleave' : function() { 
     $(this).find('.popup').hide(); 
    } 
}, 'tr'); 

jQuery documentation:

.on (eventos-map [, selector] [, datos]),
eventos-MAP un mapa en el que las claves de cadena representan uno o más tipos de eventos separados por espacios y espacios de nombres opcionales, y los valores representan una función de controlador para ser llamado para el evento (s).

Answer 2

Los formatos utilizados se especifican en la documentación de live

$(document).on({...events...}, selector, data); 

-o-

$(document).on(event, selector, data, callback); 

El código de la función live en 1.7+ ahora es sólo una función de paso:

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
} 

Answer 3

I Solo quiero pasar ambos manejadores de eventos en un objeto, como lo hago en el primer ejemplo.

En este caso se podría unir los dos eventos juntos, después se diferencian de ellos en el propio controlador, así:

$('#results tbody').on('mouseenter mouseleave', 'tr', function (e) { 
    if (e.type == "mouseenter") { 
     $(this).find('.popup').show(); 
    } 
    else { 
     $(this).find('.popup').hide(); 
    } 
}); 

Answer 4

Tomando su primer ejemplo y cambiar live a on debería ser todo lo que necesita

$('#results tbody tr').on({ 
mouseenter: 
    function() { $(this).find('.popup').show(); }, 
mouseleave: 
    function() { $(this).find('.popup').hide(); } 
}) 

Ver: http://api.jquery.com/on/#example-6