Serhioromano / bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.
http://bootstrap-calendar.eivissapp.com/
MIT License
3.02k stars 1.29k forks source link

Month change button issue #534

Open brandonjjon opened 9 years ago

brandonjjon commented 9 years ago

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 commented 9 years ago

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

brandonjjon commented 9 years ago

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

I would appreciate it.

eleazan commented 9 years ago

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