jquery UI события следующего предыдущего месяца

Я использую 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 после изменения месяца. Любые идеи? Спасибо


person Gabriel Ciprian Magda    schedule 29.11.2014    source источник


Ответы (1)


Изменение кода путем делегирования обработчиков событий для кнопок "Далее" и "Предыдущий", как показано ниже, кажется исправить проблему:

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

Обновлен скрипт

person T J    schedule 29.11.2014