jQuery ui datepicker 事件触发太早

Question

我的网站上有一个日期选择器，我想通过向每个 <a> 添加一个类来格式化某些日期，其中文本等于某个值。下面的代码有效 如果我在日期选择器可见时从控制台运行updateDatepicker();，或者如果我在函数中添加半秒延迟但当onChangeMonthYear 事件触发并运行函数时它不起作用。我知道函数正在运行，因为我在里面有 console.log("updateDatepicker") 来测试它。

这是我的代码：

function showDatePicker(){
    $( "#datepicker" ).datepicker({
        onChangeMonthYear: function(year, month, inst) { updateDatepicker(); }
    });

function updateDatepicker(){
    var days = $(".ui-datepicker-calendar a.ui-state-default").not(".ui-priority-secondary");

    for (var i=0; i < days.length; i++) {
        if(days[i].text == "2"){
            $(days[i]).addClass("datepickerActivity");
        }
    }
}

如何在不依赖 updateDatepicker() 函数延迟的情况下完成这项工作？

Answer 1

确保 jQuery onLoad 机制用于您对 showDatePicker 的调用或该函数中的代码。这将确保在这些事件触发时，所有内容都已加载并准备好在您的其他函数中使用。

$(function () {
    showDatePicker();
});

或

function showDatePicker(){
    $(function () {
        $( "#datepicker" ).datepicker({
            onChangeMonthYear: function(year, month, inst) { updateDatepicker(); }
        });
    }
}

编辑：由于元素加载不是问题，因此 onChangeMonthYear 回调似乎在日历呈现之前被调用。因此，您将不得不等待当前调用堆栈被清除。您可以在 updateDatepicker 函数中使用零等待超时来完成此操作。

function updateDatepicker() {
    setTimeout(function () {
        var days = $(".ui-datepicker-calendar a.ui-state-default").not(".ui-priority-secondary");

        for (var i=0; i < days.length; i++) {
            if(days[i].text == "2"){
                $(days[i]).addClass("datepickerActivity");
            }
        }
    }, 0);
}

请注意，此超时时间为 0 毫秒，但它仍应在日历渲染调用之后放入调用堆栈。这更多是对 jQuery UI 为日期选择器提供的可用回调的限制。