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时，都需要声明事件处理程序。如果日历中有任何可用的回调事件，请在回调中声明click事件。

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

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');
});

选择事件上的jquery datepicker UI

2 个答案: