我正在使用jquery UI datepicker来设置事件日历。你可以看到我已经创建的jsfiddle,这里: http://jsfiddle.net/ciprianmagda/bvL5kqvf/
所以我创建了一个包含事件日期的字符串,当您点击带事件的日期时,它将显示事件列表,当您点击没有事件的日期时,它将显示一条消息,表明没有事件那个日期。
我创建了一个在点击日期时处理这个问题的函数:
$(document).ready(function(){
function eventInit(){
$('.ui-datepicker-calendar tbody tr td').click(function(){
if($(this).hasClass('dayWithEvents')){
$('.list-of-events').fadeIn('nornal');
$('.no-events').fadeOut(1);
eventInit();
}else{
$('.no-events').fadeIn('nornal');
$('.list-of-events').fadeOut(1);
eventInit();
}
});
}
eventInit();
问题是当我改变月份时(在js小提琴中你可以使用红点)这个功能不再运行了。因此,如果我点击一个日期,一切都会正常工作,但如果我在那之后改变月份,该功能将不再运行。我试图创建另一个函数来运行第一个函数:
function nextPrevInit(){
$('.ui-datepicker-next, .ui-datepicker-prev').click(function(){
eventInit();
});
}
nextPrevInit();
但问题是它只有在我改变月份时才有效。一旦我点击日期并再次更改月份,该功能将不再有效。
所以,基本上我想做的是在月份更改后运行eventInit函数。 任何想法? 感谢
答案 0 :(得分:1)
按delegating the event handlers为下一个和上一个按钮修改代码,如下所示,似乎可以解决问题:
function eventInit() {
$('.ui-datepicker-calendar tbody tr td').click(function () {
if ($(this).hasClass('dayWithEvents')) {
$('.list-of-events').fadeIn('nornal');
$('.no-events').fadeOut(1);
} else {
$('.no-events').fadeIn('nornal');
$('.list-of-events').fadeOut(1);
}
eventInit();
});
}
eventInit();
$(document).on("click", '.ui-datepicker-next, .ui-datepicker-prev', eventInit);