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为日期选择器提供的可用回调的限制。

jQuery ui datepicker事件发生得太早了

1 个答案: