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

Question

Как мне объединить этот старый код jQuery в 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(); 
}); 

Я хочу передать оба обработчика событий к одному .on() вызова, но сохранить блестящее событие делегации .on() позволяет мне делать.

Спасибо!

Answer 1

Вы можете передать событие-карту в качестве первого параметра:

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

jQuery documentation:

.on (события-карта [селектор] [данные]),
события-карта карта, в которой строковые ключи представляют собой один или несколько разделенных пробелами типов событий и дополнительных пространств имен, а значения представляют собой функция обработчика, которая должна быть , вызвала событие (ы).

Answer 2

форматы, используемые указаны в документации для live

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

-или-

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

Код для live функции в 1.7+ теперь просто сквозная функция:

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

Answer 3

I просто хочу передать оба обработчика событий в один объект, как в первом примере.

В этом случае вы можете прикрепить эти два события вместе, а затем дифференцировать их в самом обработчике, как это:

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

Answer 4

Принимая первый пример и изменения live в on должно быть все, что вам нужно

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

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