javascript - 日期选择器下一步点击事件

Question

我需要为 jQuery 日期选择器上的下一个按钮预生成一个事件，并从这个答案中得到我需要的东西:

jquery datepicker adding event to next and previous button

但我不明白的是为什么:

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

有效但是:

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

在我的情况下，单击两次后不起作用？

Answer 1

这称为事件委托(delegate)，在 DOM 已经呈现后将项目添加到 DOM 时使用它。

问题是点击事件没有绑定(bind)到想要的元素，因为那个元素稍后会被注入(inject)到DOM中，所以它还不存在。因此 jQuery 必须将点击事件绑定(bind)到 DOM 渲染时实际存在的元素，并在元素注入(inject) DOM 后使用事件委托(delegate)(冒泡)捕获事件。

因此，您不需要使用 $(document) 作为 anchor ，但您确实需要使用呈现 DOM 时存在的元素。

但是，开始使用 $(document).on 并让代码正常工作是有帮助的，然后(一旦正常)您可以进一步缩小将用于捕获的元素的范围事件。

进一步阅读:

https://davidwalsh.name/event-delegate

https://learn.jquery.com/events/event-delegation/