jquery - 在 Datepicker JQuery UI (1.10.x) 和 JQuery (1.9.x) 中突出显示一整周

Question

我在移植这个 jsFiddle 时遇到了最困难的时刻:

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

到 JQuery 1.9.1(使用 JQuery UI 1.10.3)。

我尝试了显而易见的方法，将 live 更改为 on，但这不起作用。

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

Answer 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>

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

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

我想出的解决方案是更改选择器以将事件委托(delegate)给 $('.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');
});

这是更新的 fiddle :http://jsfiddle.net/NCHtH/19/