jQuery - konwersja .live() do .on()

Question

Jak mogę połączyć stary kod jQuery z wersją 1.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(); 
}); 

Chcę przekazać zarówno obsługi zdarzeń do jednego .on() rozmowy, ale zachować genialne wydarzenie delegacja .on() pozwala mi zrobić.

Dziękujemy!

Answer 1

można przekazać zdarzeń-map jako pierwszy parametr:

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

jQuery documentation:

.on (zdarzenia-map [selektor] [Dane]),
zdarzenia-MAP mapa w którym klucze łańcuch oznacza jeden lub więcej typów zdarzeń przestrzeni oddzielonych i opcjonalne nazw i wartości reprezentują funkcja obsługi jest wywołana dla zdarzenia (zdarzeń).

Answer 2

Formaty stosowane są określone w dokumentacji live

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

-lub-

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

Kod dla funkcji w 1.7+ live jest teraz po prostu funkcja pass-through:

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

Answer 3

I po prostu chcę przekazać obydwie funkcje obsługi zdarzeń w jednym obiekcie, tak jak robię to w pierwszym przykładzie.

W tym przypadku można dołączyć dwa zdarzenia razem, a następnie różnicować je w samej obsługi, jak to:

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

Answer 4

Biorąc swój pierwszy przykład i zmieniając live do on powinno być wszystko, co trzeba

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

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