在 Datepicker JQuery UI (1.10.x) 和 JQuery (1.9.x) 中突出显示整周答案

【问题标题】：Highlighting an entire week in Datepicker JQuery UI (1.10.x) and JQuery (1.9.x)在 Datepicker JQuery UI (1.10.x) 和 JQuery (1.9.x) 中突出显示整周
【发布时间】：2013-05-29 01:43:10
【问题描述】：

我很难移植这个 jsFiddle：

http://jsfiddle.net/manishma/NCHtH/

到JQuery 1.9.1（与JQuery UI 1.10.3）。

我尝试了显而易见的方法，将 live 更改为 on，但没有奏效。

我在这方面花费了太多时间和精力，如果有人能帮助我，我将不胜感激。谢谢！

【问题讨论】：

标签： jquery jquery-ui datepicker highlight

【解决方案1】：

问题在于，由于我无法理解的原因，jQueryUI 在构建日期选择器时发生了变化。在您最初调用创建日期选择器时，jQueryUI 仅构建以下内容：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-weekpicker"></div>

在第一次显示之前，它不会构建 datepicker 控件的其余部分。之后控件的DOM结构就正常添加了。

因此，$('.ui-weekpicker .ui-datepicker-calendar tr') 的长度为 0，因此未附加 mousemove 和 mouseleave 处理程序。

我想出的解决方案是更改选择器以将事件委托给$('.ui-weekpicker')（并将.live()更改为.on()）：

$('.ui-weekpicker').on('mousemove', 'tr', function () {
    $(this).find('td a').addClass('ui-state-hover');
});
$('.ui-weekpicker').on('mouseleave', 'tr', function () {
    $(this).find('td a').removeClass('ui-state-hover');
});

这是一个更新的小提琴：http://jsfiddle.net/NCHtH/19/

【讨论】：