問題描述

我真的很喜歡 .live 方法，因為它簡單明了，與您的標準事件處理程序本質上沒有太大區(qū)別.

I really liked the .live method as it was straightforward and essentially not much different than your standard event handler.

唉，它已被棄用，我只剩下 .on 方法了.

Alas, it was deprecated and I'm left with the .on method.

基本上，我正在加載和動態(tài)加載需要觸發(fā)相同事件處理程序的內容.而不是添加事件處理程序兩次或多次..live 非常適合這個，但是 .on 已經取代了它，我似乎無法讓它工作.

Basically, I'm loading and dynamically loading content that I'll need the same event handler triggered on. Rather than add the event handler twice or however many times. .live was great for this, but .on has replaced it and I just can't seem to get it to work.

檢查此代碼:

jQuery('#who_me').live('click', function(){
        alert('test123');
        return false;
    });

應該與:

jQuery('#who_me').on('click', function(){
        alert('test123');
        return false;
    });

但是當我在 ajax 調用后用 .html 方法替換內容時，只有 live 方法有效.

but when I replace content with the .html method after an ajax call only the live method works.

誰能幫我解決這個問題?

Can anyone clear this up for me?

推薦答案

你沒有正確使用 .on().如果 #who_me 對象來來去去，這是一個更好的實現(xiàn).

You aren't using .on() correctly. This is a better implementation if the #who_me object comes and goes.

jQuery(document.body).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

您在 .on() 的 jQuery 對象中使用的選擇器必須是在您安裝事件處理程序時存在的對象，并且永遠不會被刪除或重新創(chuàng)建，并且要么是您的對象希望將事件安裝在該對象或其父對象上.作為第二個參數傳遞給 .on() 的選擇器是一個可選選擇器，它匹配您希望事件發(fā)生的對象.如果你想要 .live() 類型的行為，那么你必須在 jQuery 對象中傳遞一個靜態(tài)父對象，并在第二個參數中傳遞一個匹配你想要事件的實際對象的選擇器.

The selector you use in the jQuery object for .on() must be an object that is present at the time you install the event handler and never gets removed or recreated and is either the object you want the event installed on or a parent of that object. The selector passed as the 2nd argument to .on() is an optional selector that matches the object you want the event on. If you want .live() type behavior, then you must pass a static parent object in the jQuery object and a selector that matches the actual object you want the event on in the 2nd argument.

理想情況下，您可以在 jQuery 對象中放置一個相對接近動態(tài)對象的父對象.我展示了 document.body 只是因為我知道它會起作用并且不知道你的 HTML 的其余部分，但你寧愿把它放在更接近你的實際對象的地方.如果您在 document 對象或 document.body 上放置了太多動態(tài)事件處理程序，那么事件處理可能會真正變慢，特別是如果您有復雜的選擇器或處理程序頻繁點擊或鼠標移動等事件.

Ideally, you put a parent object in the jQuery object that is relatively close to the dynamic object. I've shown document.body just because I know that would work and don't know the rest of your HTML, but you'd rather put it closer to your actual object. If you put too many dynamic event handlers on the document object or on document.body, then event handling can really slow down, particularly if you have complicated selectors or handlers for frequent events like click or mousemove.

作為參考，100% 等效于您的 .live() 代碼是這樣的:

For reference, the 100% equivalent to your .live() code is this:

jQuery(document).on('click', '#who_me', function(){
    alert('test123');
    return false;
});

.live() 只是將其所有事件處理程序安裝在文檔對象上，并使用事件冒泡來查看頁面中其他對象上發(fā)生的所有事件.jQuery 已棄用 .live() 因為最好不要在文檔對象上安裝所有實時事件處理程序(出于性能原因).因此，選擇一個更接近您的對象的靜態(tài)父對象.

.live() just installs all its event handlers on the document object, and uses event bubbling to see all the events that happen on other objects in the page. jQuery has deprecated .live() because it's better to NOT install all your live event handlers on the document object (for performance reasons). So, pick a static parent object that is closer to your object.

這篇關于在 Jquery 中正確使用 .on 方法的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！