日期选择器下次点击事件

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中不存在。