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

Question

Come posso combinare questo vecchio codice jQuery nella 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(); 
}); 

voglio passare entrambi i gestori di eventi per un .on() chiamata, ma mantenere la delegazione evento brillante .on() mi permette di fare.

Grazie!

Answer 1

è possibile passare un evento-map come primo parametro:

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

jQuery documentation:

.on (eventi-map [, selettore] [dati]),
eventi-mappa una mappa in cui le chiavi stringa rappresentano uno o più tipi di eventi separati da spazi e namespace opzionali, ei valori rappresentano una funzione di gestore per essere chiamato per l'evento (s).

Answer 2

I formati utilizzati sono specificate nella documentazione per live

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

oppure

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

Il codice per la funzione live in 1.7+ è ormai solo una funzione pass-through:

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

Answer 3

I voglio solo passare entrambi i gestori di eventi in un oggetto, come faccio nel primo esempio.

In questo caso si potrebbe collegare i due eventi insieme, poi li differenziano nel gestore stesso, in questo modo:

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

Answer 4

Prendendo il tuo primo esempio e cambiando live a on dovrebbe essere tutto ciò che è necessario

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

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