jQuery - konvertieren .live() zu .on()

Question

Wie gehe ich über die Kombination dieser alten jQuery-Code in die 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(); 
}); 

Ich möchte ein .on() Anruf beide Event-Handler übergeben, aber halten Sie die brillante Veranstaltung Delegation .on() ermöglicht es mir zu machen.

Vielen Dank!

Answer 1

Sie können ein Ereignis-Karte als ersten Parameter übergeben:

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

jQuery documentation:

.on (events-map [Selektor] [Daten]),
events-Karte Eine Karte, in der die Zeichenfolge Tasten repräsentieren einen oder mehrere Leerzeichen getrennte Ereignistypen und optional Namensraum, und die Werte repräsentieren eine Handler-Funktion, die für das Ereignis (die Ereignisse) aufgerufen werden soll.

Answer 2

Die Formate werden für live

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

-oder

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

Der Code für die live Funktion in 1.7+ in der Dokumentation angegeben ist jetzt nur noch eine Passthrough-Funktion:

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

Answer 3

I Ich möchte nur beide Event-Handler in einem Objekt übergeben, wie im ersten Beispiel.

In diesem Fall können Sie zusammen die beiden Ereignisse anhängen könnten, unterscheiden sie dann in der Prozedur selbst, wie folgt aus:

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

Answer 4

Ihr erstes Beispiel und Ändern live zu on sollte alles sein, was Sie brauchen,

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

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