2014-11-29 4 views
0

Я использую jquery UI datepicker для настройки календаря событий. Вы можете увидеть jsfiddle того, что я уже создать здесь: http://jsfiddle.net/ciprianmagda/bvL5kqvf/jquery UI next prev month events

Таким образом, я создал строку с датами, которые имеют события и при нажатии на дату с событиями она покажет список событий и когда вы нажмете на день без событий, он покажет сообщение о том, что для этой даты нет событий.

Я создал функцию, которая заботится об этом, когда я нажимаю на дату:

$(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

Изменение кода по 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

+1

спасибо TJ! Это работает отлично! ;) –