无法定位 jQuery datepicker 中的元素答案

【问题标题】：Can't target elements within jQuery datepicker无法定位 jQuery datepicker 中的元素
【发布时间】：2018-08-30 17:31:58
【问题描述】：

我在使用插件 WooCommerce Bookings 定位 jQuery ui-datepicker 中的元素时遇到问题。

每次我使用 JavaScript 定位它时，它都会返回 null，因此无法执行 EventListener。

但是，如果我针对 jQuery ui-datepicker 之外的任何内容，我实际上可以执行使用 JS 和 jQuery 创建的事件。

这是我第一次遇到这样的事情，我觉得很不寻常。

有两个我用过的sn-ps来测试能不能识别元素：

jQuery('.hasDatepicker').on('click', function() {
        alert('hi');
});


function showVolunteers() {
        alert("hi");
}

document.querySelector(".hasDatepicker").addEventListener('click', showVolunteers);

这里是一个 JS fiddle 用于日期选择器的 HTML：https://jsfiddle.net/e5dnru0e/3/

日期选择器嵌套在一个字段集中，我可以定位它，所以我想也许我可以尝试使用 jQuery('fieldset div.ui-datepicker') 但这也不起作用。

为了三重检查我使用了正确的选择器，我尝试使用了一些 CSS，并且 CSS 运行良好，所以我的选择器没有问题。

是否有可能它以某种方式限制了 jQuery 在此日期选择器中的使用。

任何帮助或建议将不胜感激。

【问题讨论】：

您能否添加相关的 HTML，因为它显示在浏览器的源视图中？此外，事件失败的主要原因是添加侦听器时元素还不存在。
也许尝试在 jQuery("document").ready(function() {...}) 中添加事件监听器？
嗨 @ChrisG 对不起，我现在已经用它做了一个 JS 小提琴：jsfiddle.net/e5dnru0e/3
@JoshGomes 如果将 jQuery 添加到小提琴并将代码设置为 <body> 的 and 处，它可以正常工作：jsfiddle.net/khrismuc/e5dnru0e/7
感谢@ChrisG，这可能就是问题！

标签： javascript jquery woocommerce datepicker woocommerce-bookings

【解决方案1】：

当您为任何 DOM 元素注册事件时，它应该在注册时出现在 DOM 中。

如果是动态控件（在 DOM 就绪事件之后注入到 DOM），您可以使用以下 jquery 语法来注册事件。

$(document).on('click','.ui-datepicker', function() {
        alert('hi');
});

上面的代码附加了document 上的点击事件（在文档就绪时始终存在）。 on 函数的第二个参数是[selector] 即。 .ui-datepicker

除了document，您可以将点击事件附加到任何其他DOM元素上在注册活动时出现。

即

$('.datepicker-container').on('click','.ui-datepicker', function() {
            alert('hi');
    });

【讨论】：