日期選擇器下次點擊事件

Question

我需要為jQuery日期選擇器上的下一個按鈕執行一個事件，並從此答案中獲取所需的信息：

但是我不明白為什么：

$(document).on('click', '.ui-datepicker-next', function() {
  // Preform event
};

可以，但是：

$(".ui-datepicker-next").on('click', function() {
  // Preform event
};

在我的情況下，單擊兩次后不起作用？

Answer 1

這稱為event delegation ，在已呈現DOM之后將項目添加到DOM時使用。

問題在於click事件未綁定到所需元素，因為該元素以后將注入到DOM中，因此它尚不存在。 因此，jQuery必須將click事件綁定到呈現DOM時實際存在的元素，並在將元素注入DOM后使用事件委托（冒泡）來捕獲事件。

因此，您不必使用$(document)作為錨，但是您確實需要使用呈現DOM時存在的元素。

但是，從使用$(document).on並使代碼開始工作，然后（一旦工作），您可以進一步縮小將用於捕獲事件的元素的范圍，這將很有幫助。

進一步閱讀：

https://davidwalsh.name/event-delegate

Answer 2

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。 通過選擇保證在附加委托事件處理程序時會出現的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序的需要。

在第一種情況下，處理程序將附加到保證存在的document上。 然后，選擇器確保僅在單擊.ui-datepicker-next時才觸發處理程序。

但是，在第二種方法中，沒有可用於附加處理程序的對象，因為在注冊處理程序時， .ui-datepicker-next在DOM中不存在。