jQuery的 - 轉換.live來。對點擊

Question

可能重複：
jQuery 1.7 - Turning live() into on()
.live() vs .on() method

我有以下代碼（我已經簡化爲這個），它工作得很好與jQuery-1.7一起。

$("td.ui-datepicker-week-col a").live("click", function() { 
    alert("hello"); 
}); 

我想升級我的代碼，雖然這樣我就可以升級我的jQuery包的版本，所以我改成了這一點。

$("td.ui-datepicker-week-col").on("click", "a", function() { 
    alert("hello"); 
}); 

雖然這並沒有做任何事情。它也不會拋出任何錯誤，所以我看不出問題出在哪裏。

任何想法？

Answer 1

如果您在開始時沒有"td.ui-datepicker-week-col"元素，則必須選擇現有的永久性集合。例如

$(document).on("click", "td.ui-datepicker-week-col a", function() { 
    alert("hello"); 
}); 

的on功能，相反live當你調用綁定功能定義它，將只與設定的作業。什麼是動態是當發生事件時作爲參數傳遞給on的選擇器的解釋。

Answer 2

$("body").on("click", "td.ui-datepicker-week-col a", function() { 
    alert("hello"); 
}); 

Answer 3

您on聲明的第一部分結合到已經在呼叫時存在的元素。要正確使用委派，您需要選取當時存在的元素，並確保它是事件元素的父元素。如果不出意外，你可以隨時使用document（這是live一樣，太！）

$(document).on("click", "td.ui-datepicker-week-col a", function(e) { /*...*/ }); 

Answer 4

的問題可能是"td.ui-datepicker-week-col"沒有出席在頁面加載時間的DOM和on事件連接。

將處理程序附加到父元素，該元素將在JavaScript代碼加載時存在。最簡單的（和差，但工作）是：

$("body").on("click", "td.ui-datepicker-week-col a", function() { 
    alert("hello") 
}) 

這將觸發對每點擊文件，然後jQuery將驗證，如果點擊的元素是"td.ui-datepicker-week-col a"，如果爲真，執行回調。

更有效的方法是附加到"td.ui-datepicker-week-col a"肯定會存在的子容器。

Answer 5

嘗試......

$('.ui-datepicker-week-col').on('click', 'a', function() { 
    alert("hello"); 
}); 

而且看到這個Example

問候。