2009-04-22 181 views
1

我正在为jQuery网站制作一个非常简约的日历插件。我对它没有太多的看法,所以我正在关注插件教程。我有两个应该改变月份的<a>链接,但不幸的是他们只做了一次,然后他们都停止工作。我怀疑我把事件放在了错误的地方。jQuery插件事件只触发一次

对不起,相当凌乱的代码,它只是一个蓝图呢。

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

这里是html测试。

<!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> 

回答

4

似乎发生了什么是当您第一次单击时正在重写HTML。发生这种情况时,点击事件不再绑定到hrefs,因为旧元素已从DOM中删除。

您可以将点击事件放入其自己的函数中,并在重建日历或使用事件委派后调用该函数。为此,在#calendar div上附加click事件并跟踪哪个元素被点击。

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

+0

如果是这样的话,还可以使用“实时”事件:http://docs.jquery.com/Events/live – montrealist 2009-04-22 20:07:44