SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: Function call loops multiple times with click event.

    Good morning!

    I'm building a calendar using HTML and javascript (jQuery).

    In short, I have a nav-like menu at the top with each month and the calendar is built below that.

    Problem:
    When the user clicks on a month to change the calendar, it's as if jQuery remembers how many times the user has clicked previously and basically loops through the buildCalendar() function that many times. The first time they change it is ok but if the user clicks again the click event is fired twice. The third time a month is clicked, the click event is fired 4 times. Etc...

    Here's the code:

    HTML Code:
    <div id="calendarLinkWrapper">
    	
    	<div id="yearWrapper">			
    		<div id="2010" class="yearDiv">2010</div>
    		<div id="2011" class="yearDiv">2011</div>
    		<div id="2012" class="yearDiv">2012</div>
    		<div id="2013" class="yearDiv">2013</div>
    		<div id="2014" class="yearDiv">2014</div>
    		<div id="2015" class="yearDiv">2015</div>
    	</div>
    		
    	<div id="monthWrapper">
    		<div id="0" class="monthDiv">Jan</div>
    		<div id="1" class="monthDiv">Feb</div>
    		<div id="2" class="monthDiv">Mar</div>
    		<div id="3" class="monthDiv">Apr</div>
    		<div id="4" class="monthDiv">May</div>
    		<div id="5" class="monthDiv">Jun</div>
    		<div id="6" class="monthDiv">Jul</div>
    		<div id="7" class="monthDiv">Aug</div>
    		<div id="8" class="monthDiv">Sep</div>
    		<div id="9" class="monthDiv">Oct</div>
    		<div id="10" class="monthDiv">Nov</div>
    		<div id="11" class="monthDiv">Dec</div>
    	</div>
    
    </div>
    
    <div id="calendarDiv">
    	
    	<table width="720" cellpadding="0" cellspacing="0" border="0" id="calendarTable">
    		<caption></caption>
    		<thead>
    			<tr>
    				<th scope="col">Sunday</th>
    				<th scope="col">Monday</th>
    				<th scope="col">Tuesday</th>
    				<th scope="col">Wednesday</th>
    				<th scope="col">Thursday</th>
    				<th scope="col">Friday</th>
    				<th scope="col">Saturday</th>
    			</tr>
    		</thead>
    			
    		<tbody>
    			
    		</tbody>
    		
    	</table>
    	
    </div>
    		

    Code JavaScript:
     
    // Global arrays:
    var
                 weekdayArray = ['Sunday', 'Monday', 'etc...'],
                 monthNameArray = ['January', 'February', 'etc...'],
                 monthNumArray = [31, 28, 31, 30, 31, 'etc...'];
     
     
    var main = {
                 init: function(){
                              main.defaultCalendar();
                 },
     
                 defaultCalendar: function(){
                              /* This function just gathers default date information for
                              today's date and passes month and year to the
                              buildCalendar function. */
     
                              main.buildCalendar(month, year);
                 },
     
                 changeDate: function(oldMonth, oldYear){
                              /* When a month is clicked it retrieves its id (which is a 
                              month array number and passes in the old year value */
                              $('.monthDiv').click(function(){
                                          main.buildCalendar(this.id, oldYear);
                               }
     
                               /*Same thing here for year except, obviously, 
                               it would be main.buildCalendar(oldMonth, this.id); */
                 },
     
                 buildCalendar: function(month, year){
     
                               /*This has been shortened and simplified somewhat. I'll
                               give you the sequence of events: */
     
                               // create firstDayOfMonth and a dayCounter variable
     
                               // check for leap year
     
                               // Create table caption with month and year
     
                               // Build calendar between the 2 tbody tags using for loops
     
                               /* Call the changeDate function and wait for user to 
                               click a month or year */
                               main.changeDate(month, year);
     
                 }
     
    }
     
    $(document).ready(main.init);
    Last edited by sd_javascript; May 19, 2011 at 05:09. Reason: Forgot a piece of code.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •