Question

I am making a very minimalistic calendar plugin for the website with jQuery. I have not had much expirience with it, so I was following plugin tutorial. I have two <a> links that should change month, but unfortunately they do so only once and then both of them stop working. I suspect I have put events to a wrong place.

Sorry for quite messy code it is just a blueprint yet.

Here is the javascript.

(function($){    
    $.fn.extend({
        jSimpleCalendar : function(currentDate)
        {


            return this.each(
                function()
                {               

                    obj = $(this);

                    result = renderCalendar(currentDate);   

                    obj.html(result);

                                        // Event handlers
                    $('#JQSCMonthPrev').click(function ()
                    {
                        currentDate.setMonth(currentDate.getMonth() - 1);
                        result = renderCalendar(currentDate);

                        obj.html(result);

                    });
                                        $('#JQSCMonthNext').click(function ()
                    {
                        currentDate.setMonth(currentDate.getMonth() + 1);
                        result = renderCalendar(currentDate);

                        obj.html(result);

                    });

                });



            function renderCalendar(date)
            {
                // Get the calendar
                calendar = createMonthArray(date);

                // Build xhtml
                var result = '<table class="jQSCTable">';               

                result += '<thead><tr><td colspan=4><a href="#" id="JQSCMonthPrev">&lt;</a> <a href="">' + getMonthNames()[date.getMonth()] + '</a> <a href="#" id="JQSCMonthNext">&gt;</a></td>';
                result += '<td colspan=3><a href="#" id="JQSCYearPrev">&lt;</a> <a href="">' + date.getFullYear() + '</a> <a href="#" id="JQSCYearNext" >&gt;</a></td></tr></thead><tbody>';


                for(i=0;i<(calendar.length);i++)
                {
                    result += '<tr>';
                    for (a=1; a<=7; a++)
                    {
                        result += '<td>';
                        if(calendar[i][a]!='N')
                        {
                            result += '<a id="JQSCLink' + calendar[i][a] + '">' + calendar[i][a] + '</a>';
                        }
                        result += '</td>';
                    }
                    result += '</tr>';
                }
                result += '</tbody></table>';   

                return result;          

            };  

            function createMonthArray(date)
            {
                // Get first day of month
                date.setDate(1);

                // Make callendar
                var calendar = new Array();

                // Fill empty shit from previous month
                for(i=0;i<date.getDay()-1;i++)
                    calendar.push('N');

                // Get number of days
                var numberOfDays = getNumberOfDaysMonth(date);

                //Fill the rest
                for(i=1;i<numberOfDays+1;i++)
                    calendar.push(i);               

                // Get number of end days
                var endDays = calendar.length % 7 - 1;

                //Fill the empty stuff at the end
                for(i=0;i<7-endDays;i++)
                    calendar.push('N');         



                //Slice to seven pieces
                var slicedCalendar = new Array();
                var week = 0;
                slicedCalendar[0] = new Array();
                for(i=1;i<calendar.length;i++)
                {
                    slicedCalendar[week][i-week*7] = calendar[i-1];
                    if (((i%7)==0)&&(i!=0))
                    {
                        week++;
                        slicedCalendar[week] = new Array();
                    }
                }
                return slicedCalendar.splice(0, week);

            };      

            function getNumberOfDaysMonth(date)
            {
                var minDays = 28;
                var dateFound = false;          
                var oldMonth = date.getMonth();
                var workDate = new Date(date.getYear(), date.getMonth(), 1);

                while (!dateFound)
                {
                    workDate.setDate(minDays+1);                
                    var newMonth = workDate.getMonth();//new month date 

                    if (newMonth != oldMonth)//if the month has changed
                        dateFound = true;
                    else
                        minDays++;
                }

                return minDays;         

            }   

            // Month names
            function getMonthNames()    
            {
                var month = Array();
                month[0] = 'January';
                month[1] = 'February';
                month[2] = 'March';
                month[3] = 'April';
                month[4] = 'May';
                month[5] = 'June';
                month[6] = 'July';
                month[7] = 'August';
                month[8] = 'September';
                month[9] = 'Octorber';
                month[10] = 'November';
                month[11] = 'December';

                return month;
            }       

        }
    });         
})(jQuery);

Here is html test.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jSimpleCalendar.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#calendar").jSimpleCalendar(new Date());
            });
        </script>
    </head>
    <body>
        <div id="calendar">
        </div>      
    </body>
</html>

Answer 1

Seems like what’s happening is the HTML is being rewritten when you click the first time. When this happens, the click events are no longer bound to the hrefs since the older elements were removed from the DOM.

You could put the click events into it’s own function and call the function after rebuilding the calendar or use event delegation. For this, append the click event on the #calendar div and track which element was clicked.

http://www.learningjquery.com/2008/03/working-with-events-part-1