jquery UI下个上个月的活动

时间:2014-11-29 11:31:38

标签: jquery jquery-ui calendar jquery-ui-datepicker

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

1 个答案:

答案 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);

Updated Fiddle