Question

我正在使用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函数。任何想法？感谢

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

Updated Fiddle

jquery UI下个上个月的活动

1 个答案: