jQuery - chuyển đổi .live() sang .on()

Question

Làm cách nào để kết hợp mã jQuery cũ này vào 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(); 
}); 

Tôi muốn vượt qua cả xử lý sự kiện cho một .on() cuộc gọi, nhưng giữ cho đoàn sự kiện rực rỡ .on() cho phép tôi làm.

Cảm ơn bạn!

Answer 1

Bạn có thể vượt qua một sự kiện-bản đồ như các tham số đầu tiên:

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

jQuery documentation:

.on (sự kiện-bản đồ [, bộ chọn] [, dữ liệu]),
sự kiện-bản đồ Bản đồ trong đó các phím chuỗi đại diện cho một hoặc nhiều loại sự kiện được phân tách bằng dấu cách và . một hàm xử lý là được gọi cho (các) sự kiện.

Answer 2

Các định dạng sử dụng được quy định trong tài liệu hướng dẫn cho live

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

-hoặc-

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

Mã cho live chức năng trong 1.7+ tại là chỉ là một chức năng pass-through:

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

Answer 3

I chỉ muốn truyền cả hai trình xử lý sự kiện vào một đối tượng, như tôi làm trong ví dụ đầu tiên.

Trong trường hợp này, bạn có thể đính kèm hai sự kiện lại với nhau, sau đó phân biệt chúng trong xử lý riêng của mình, như thế này:

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

Answer 4

Lấy ví dụ đầu tiên của bạn và thay đổi live để on nên tất cả những gì bạn cần

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

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