Month change button issue

[brandonjjon]

This is the code for navigating.

$('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
                calendar.navigate($this.data('calendar-nav'));
        });
});

Problem is I have some JS which launches a form when the user selects a day:

$('.cal-month-day, .cal-year-box .span3').on('click', function() {
        $('.add_booking').slideDown();
});

It works just find on the first load of the page and August is displayed for example. But as soon as you switch months, the click event never gets executed again. Even if I navigate back to August for example.

Any ideas?

[hadibudiman]

this will works, $('#calendar').on('click','.cal-month-day, .cal-year-box .span3', function() { $('.add_booking').slideDown(); });

[brandonjjon]

Thanks, that did the trick. Can you explain why that works but not the one I was using?

I would appreciate it.

[eleazan]

Thats for the "attach" event...

On yours, you attach the "on click" event to all elements that match $(".cal-month-day, .cal-year-box .span3'). When you change the view, these elements are removed, and replace with news (without the attached event)...

But him attach the event to "#calendar" when click on '.cal-month-day, .cal-year-box .span3'... and the #calendar is not removed on change's view...

You have a better explanation here: http://api.jquery.com/on/ (Delegated events).