.on（）不能在頁面加載后添加HTML

Question

[編輯]

這是一個問題的jsFiddle。

[/編輯]

我正在使用datepicker（ jQuery UI ）的網站上工作。

在datepicker旁邊，如果用戶從datepicker選擇工作日或周末，則會有一個time dropdown需要更改。

我已經編寫了這段代碼來嘗試從datepicker中獲取ui-datepicker-week-end類來測試它是否是一個周末，但我根本無法得到任何console.log 。

$('.ui-datepicker').on('click', 'tr', function() {
    console.log($(this));
});

這是開發站點 。 我認為這個問題是對的HTML datepicker被添加在與jQuery等.on()不知道它的存在拿起類？ 我知道.live()會這樣做，但現在我相信這已經貶值了。

任何想法如何抓住點擊td的類？

Answer 1

交換語法。 on()應綁定到動態內容的最近靜態父級：

$('tr').on('click', '.ui-datepicker', function() {
    console.log($(this));
});

Answer 2

嘗試這個：

$(document).on('click', '.ui-datepicker td', function() {
    console.log(this.className);
});

其中#date是頁面加載時文檔中可用的靜態元素（ datepicker ），並在.ui-datepicker的td上綁定click事件，然后您可以在日歷中獲取所單擊的td的類名。

Answer 3

語法很好，但是在初始化datepicker之后，你可能沒有綁定事件，但之前。

確保你在$('.ui-datepicker').on...之前做$('.yourClass').datepicker() 。

在.on()之前執行console.log($('.ui-datepicker').length) .on()將告訴您是否初始化了.on() 。

在它不工作的情況下，它意味着（但我不這么認為） .ui-datepicker是動態的。 您必須定位父母：

$('.parent').on('click', '.ui-datepicker tr', function(){});

---

編輯

jQuery UI似乎停止傳播，因此無法綁定click事件。

但它有一個選項，允許您在選擇日期時綁定事件：

http://api.jqueryui.com/datepicker/#option-onSelect

在初始化datepicker時將其傳遞給選項對象。

最好使用它，因為您還可以使用鍵盤選擇日期（因此不會觸發任何點擊）。

http://jsfiddle.net/jAs5X/2/

Answer 4

改成

$('.ui-datepicker tr').on('click', function() {
    console.log($(this));
});