jQuery 플러그인 이벤트가 한 번만 발생합니다.

Question

jQuery를 사용하여 웹 사이트에 대한 매우 간단한 달력 플러그인을 만들고 있습니다. 나는 많은 expirience을 가지고 있지 않았기 때문에, 나는 플러그인 튜토리얼을 따르고 있었다. 달이 바뀌는 두 개의 <a> 링크가 있지만 불행히도 한 번만 수행하면 둘 다 작동을 멈 춥니 다. 나는 사건을 잘못된 장소에 넣었다고 생각한다.

매우 복잡한 코드로 인해 미안하지만 아직 청사진에 불과합니다.

다음은 자바 스크립트입니다.

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

Answer 1

처음 클릭 할 때 HTML이 다시 쓰여지는 것처럼 보입니다. 이 경우 이전 이벤트가 DOM에서 제거되었으므로 더 이상 클릭 이벤트가 hrefs에 바인딩되지 않습니다.

클릭 이벤트를 자체 함수에 넣고 캘린더를 재구성하거나 이벤트 위임을 사용하면 함수를 호출 할 수 있습니다. 이를 위해 #calendar div에 click 이벤트를 추가하고 클릭 한 요소를 추적합니다. 이 경우

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