jquery потребителски интерфейс следващия предходен месец събития

Използвам 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 fiddle можете да използвате червените точки), тази функция вече не работи. Така че, ако щракна върху дата, всичко ще работи добре, но ако променя месеца след това, функцията няма да работи повече. Опитах се да създам друга функция, за да стартирам първата:

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

Актуализиран Fiddle

person T J    schedule 29.11.2014