日期选择器下一步点击事件 [英] Date-picker Next click event

问题描述

我需要为jQuery日期选择器中的下一个按钮预设一个事件，并从此答案中得到我需要的内容：

I needed to preform a event for the next button on the jQuery date-picker and got what I needed from this answer:

jquery datepicker将事件添加到下一个和上一个按钮

但是我不明白为什么：

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

工作但是：

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

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

Doesn't work, in my case after two clicks?

推荐答案

这被称为 code>，并且在DOM已被渲染后将项目添加到DOM中时使用。

This is called event delegation, and it is used when items are added to the DOM after the DOM has already been rendered.

问题是点击事件未被绑定到所需的元素，因为该元素以后将被注入到DOM中，所以它不存在。因此，jQuery必须将click事件绑定到DOM呈现时实际存在的元素，并且一旦元素注入到DOM中，就使用事件委托（bubbling）来捕获事件。

The problem is that the click event is not bound to the desired element, because that element will later be injected into the DOM, so it does not yet exist. So jQuery must bind the click event to an element that actually exists at the time the DOM is rendered, and use event delegation (bubbling) to trap the event once the element is injected into the DOM.

因此，您不需要使用 $（document）作为您的锚点，但您需要使用呈现DOM时存在的元素。

Therefore, you need not use $(document) as your anchor, but you do need to use an element that is present when the DOM is rendered.

但是，使用 $（document）.on 开始使用代码，然后（一旦工作），您可以进一步缩小您将用于捕获事件的元素。

However, it is helpful to begin by using $(document).on and getting the code working, and then (once working) you can further narrow down the element you will use to trap the event.

进一步阅读：

https://davidwalsh.name/event-delegate

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

这篇关于日期选择器下一步点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！