jQuery - 將.live（）轉換爲.on（）

如何將這個舊的jQuery代碼合併到v1.7 .on()？jQuery - 將.live（）轉換爲.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()讓我做。

謝謝！

來源

2012-05-17 pilau

請告訴我錯了你的第二個例子嗎？你可以將on（）調用從一個選擇器鏈接下來，但除此之外，我看不到任何問題。 –

不，沒有問題，我只想在一個對象中傳遞兩個事件處理程序，就像我在第一個示例中那樣。順便提一下，感謝您的超級快速回復。 – pilau

TJ。回答真正的問題，但羅裏是正確的，在這種情況下，你可以只使用一個單一的dyanmic處理程序方法。 – JMM

你可以傳遞一個事件地圖作爲第一個參數：

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

jQuery documentation：

。對（事件映射[，選擇器] [，數據]），
事件映射其中字符串鍵表示一個或多個空間分隔的事件類型和可選命名空間，A圖和值表示處理函數爲要求事件。

來源

2012-05-17 13:51:32

這是一個，謝謝TJ。 – pilau

中使用的格式的文檔中指定爲live

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

- 或 -

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

在1.7+的live函數的代碼現在只需直通功能：

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

來源

2012-05-17 13:49:03 zzzzBov

I只是想在一個對象中傳遞兩個事件處理程序，就像我在第一個例子中那樣。

在這種情況下，你可以在兩個事件連接在一起，然後區分它們在處理程序本身，就像這樣：

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

來源

2012-05-17 13:51:15

這很好！我認爲如果你在同一個元素上綁定了許多事件處理程序，並且可以使用選擇開關來捕獲所有內容，那麼它會派上用場。 – pilau

以你的第一個例子，改變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

來源

2012-05-17 13:52:02

但是你會錯過事件代表團。看看TJ的回答:) – pilau

jQuery - 將.live（）轉換爲.on（）

回答

相關問題