jquery datepicker UI on select event

Question

我正在使用jquery ui datepicker来设置事件日历。我创建了一个字符串来为日历中的某些日期提供类"dayWithEvents"，我想做的是当您单击其中一个日期时，当您单击没有此类的日子时会发生一些事情，而当您单击没有此类的日子时，会发生其他事情。所以我给一些日期一个特定的类，比如这样：

var eventsString = [
        '11/17/2014',
        '11/18/2014',
        '11/2/2014'
    ];
function highlightDays(date) {
    for (var i = 0; i < eventsString.length; i++) {
        if (new Date(eventsString[i]).toString() == date.toString()) {
            return [true, 'dayWithEvents'];
        }
    }
    return [true, ''];
}

然后，当您单击其中一个日期时，我尝试触发该事件：

$('.ui-datepicker-calendar tbody tr td').click(function(){
        if($(this).hasClass('dayWithEvents')){
            alert('day with event');
        }
    });

问题是，这只是我第一次点击有这个类的一天时的工作。如果我第二次单击它，它将不起作用，而且如果我第一次单击另一个日期，然后是此类的其中一个日期，它将不起作用。

您可以在此处查看此日历：http://bootstrap.expert/tmp/cal/

任何想法如何使它每次我点击这些日期时都能工作？谢谢

Answer 1

您需要在每次日历 DOM 重新加载时声明事件处理程序。如果日历有任何可用的回调事件，请在回调中声明单击事件。

或者，您可以在每次点击时重新启动事件。

function eventInit(){
    $('.ui-datepicker-calendar tbody tr td').click(function(){
        if($(this).hasClass('dayWithEvents')){
            alert('day with event');
            eventInit();
        }
    });
}
eventInit();

Answer 2

将 js 代码更改为：

使用 .on() 事件处理程序将 click 事件动态添加到具有类dayWithEvents的所有表单元格

$('.ui-datepicker-calendar').on('click', 'tbody tr td.dayWithEvents', function(){
    alert('day with event');
});