Live()를 사용하여 새로 만든 입력에 Datepicker 적용

jQuery datepicker에 문제가 있습니다. 내 양식에는 사용자에게 추가 행을 제공하기 위해 "다른 항목 추가"버튼이있어 하나 이상의 일치 항목을 입력 할 수 있습니다. 나는 날짜 선택기를 표시 할 날짜를 원하는 라이브() 함수Live()를 사용하여 새로 만든 입력에 Datepicker 적용

 $(function() { 
     $('#AddAnother').bind('click', function(event) { 
      var tablerow = $('#CreateMatch tr:last').html(); 
      $('#CreateMatch tr:last').after('<tr>' + tablerow + '</tr>'); 
     }); 

     $('input.Datetime').live('click', function() { 
      $(this).datepicker({ 
       showOn: 'focus', 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: "dd-mm-yy" 
      }).focus(); 
     }); 

    });

함께 할 방법을 찾아 새 행에 적용해야 .live 기능을 빌드 AddAnother 바인딩이 볼 수 있듯이 Datetime 클래스로 새로 추가 된 텍스트 상자. 크롬을 사용하여 요소를 검사하면 텍스트 상자에 jQuery가 추가하는 "hasDatePicker"클래스가 생기고 있음을 알 수 있습니다. 그러나 이는 행을 삭제하는 방법 때문이라고 생각합니다. 여기

내 모든 HTML입니다 :

<div id="MatchForm"> 
     <table id="CreateMatch"> 
      <tr> 
       <th>Prospect</th> 
       <th></th> 
       <th>Opponent</th> 
       <th>Match Date</th> 
       <th>Location</th> 
      </tr> 
      <tr> 
       <td> 
        <select name="Prospect"> 
         <option value="">Select prospect...</option> 
         <% foreach (var p in Model.AllProspects){ %> 
         <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option> 
         <%} %> 
        </select> 
       </td>  
       <td>vs</td> 
       <td> 
        <select name="opponent"> 
         <option value="">Select opponent...</option> 
        <% foreach (var p in Model.AllBoxers ) 
         { %> 
         <option value="<%= p.BoxerId %>"><%= p.BoxerNameReverse %></option> 
        <%} %> 
        </select>      
       </td> 
       <td><input type="text" class="Datetime" name="matchDate" style="width:100px" /></td> 
       <td><input type="text" id="Location" name="Location" style="width:100px" /></td> 
      </tr> 
     </table> 
     <input type="button" name="AddAnother" id="AddAnother" value="Add Another" /> 
     <input type="submit" name="submit" value="Submit" /> 
    </div>

그래서 당신이 최대로드 첫 번째 텍스트 상자에 작업을 수행 알고 있지만 라이브 바인딩이 작동하고 새로운 텍스트 상자에 적용하지 않는 것!

출처

2010-07-12 Steve

"live()"기능은 이벤트 처리에 관한 것입니다. 따라서 datePicker를 설정하는 코드는 "클릭"이벤트가 발생할 때만 발생합니다. datepicker 코드는 그 시점에서 사용하는 핸들러를 설정하지 않습니다.

jQuery의 "data()"기능을 사용하여 이벤트 처리기에서 요소에 플래그를 유지하도록 시도 할 수 있습니다. 플래그가없는 요소가 있으면 클릭 핸들러가 datepicker와 플래그를 설정하고 자체적으로 다른 "클릭"을 트리거 할 수 있습니다. 나는 그러나 그것을 시도하지 않았다.

출처

2010-07-12 18:55:47 Pointy

여기서 문제는 .datepicker()이 적용되면 hasDatepicker이라는 입력에 클래스를 추가하고 찾으면 다시 바인딩하지 않는다는 것입니다. 행에 날짜 선택 도구를 열면이 클래스가 추가되고 클래스를 미래 행에 복사하면 datepicker가 줄어 듭니다.

은 다음과 같이 행을 복제 할 때이 단지 클래스를 제거 해결하려면

$('#AddAnother').bind('click', function(event) { 
    $('#CreateMatch tr:last').clone().appendTo('#CreateMatch') 
          .find('input.Datetime') 
          .removeClass('hasDatepicker'); 
});

You can give it a try here합니다.

출처

2010-08-29 22:40:46

Live()를 사용하여 새로 만든 입력에 Datepicker 적용

답변

관련 문제