javascript - 无法定位 jQuery 日期选择器中的元素

Question

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

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

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

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

有两个片段我用来测试它是否可以识别元素:

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


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

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

这是一个带有日期选择器 HTML 的 JS fiddle :https://jsfiddle.net/e5dnru0e/3/

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

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

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

如有任何帮助或建议，我们将不胜感激。

Answer 1

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

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

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

上面的代码在 document 上附加了点击事件(它总是出现在 Document ready 上)。 on 函数的第二个参数是 [selector] 即。 .ui-datepicker

除了 document，您还可以在任何其他 DOM 元素上附加点击事件在注册事件时出席。

即

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