Datepicker不工作，而動態添加行

Question

我想動態添加行，但日期選擇器不是創建新行。它僅適用於第一行，但不適用於後續行。 PFB代碼：

var counter = 2; 
    var limit = 100; 
    $(function() 
      { 
      $(".datepicker").removeAttr('id').removeClass('hasDatepicker').datepicker({ dateFormat: 'ddMyy', minDate: '0' , maxDate: '366'}); 
      }); 

    function addInput(count){ 
     if (counter == limit) { 
       alert("You have reached the limit of adding " + counter + " inputs"); 
     } 
     else { 
       $("#btn"+(count-1)).hide(); 
       //document.getElementById(divName).appendChild(newdiv);  
       $("#appendTag").append("<tr id='record"+count+"'><td><input type='text' name='fn[]'></td><td><input type='text' name='cab[]'></td><td><input type='text' name='sd[]' class='sd"+count+" datepicker'></td>" 
             +"<td><input type='text' name='ed[]' class='ed"+count+" datepicker'></td><td><input type='text' name='brd[]' maxlength='3'></td><td><input type='text' name='off[]' maxlength='3'></td><td><input type='text' name='seats[]' maxlength='3'></td>" 
              +"<td><input type='text' name='dow[]' maxlength='7'></td><td><input type='button' value='Add' id='btn"+count+"' onClick='addInput("+(++count)+");'/></td><td><input type='button' value='x' id='cross"+count+"' onclick = 'Remove("+(count-1)+");'/></td></tr>"); 

          $(".sd"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 
          $(".ed"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 
       counter++; 
     } 
    } 
    function Remove(count){ 
     $("table tbody").find('tr#'+'record'+count).each(function(){ 
        counter--; 
        if(counter == 2){ 
         $("#btn0").show(); 
        } else 
        if($("#btn"+count).is(':visible')){ 
        //$("#btn"+(count-1)).show(); 
         for(i=(count-1);i>0;i--) 
      { 
       if ($("#btn"+i).length) { 
       $("#btn"+i).show(); 
       break; 
       } 
         } 
        } 
        $(this).remove(); 
      }); 
    } 
----------------------------------------------------------- 

<div id="dynamicInput"> 
      <table> 
       <tr>&nbsp; 
       </tr> 
       <tr>&nbsp; 
       </tr> 
       <tr> 
        <td>Flight No</td> 
        <td>Class</td> 
        <td>Start Date</td> 
        <td>End Date</td> 
        <td>Origin</td> 
        <td>Destination</td> 
        <td>No Of Seats</td> 
        <td>Days Of Week</td> 
       </tr> 
       <tbody id="appendTag"> 
        <tr id="record0"> 
         <td><input type="text" name="fn[]" maxlength="6"></td> 
         <td><input type="text" name="cab[]" maxlength="1"></td> 
         <td><input type="text" name="sd[]" class="sd0 datepicker"></td> 
         <td><input type="text" name="ed[]" class="ed0 datepicker"></td> 
         <td><input type="text" name="brd[]" maxlength="3"></td> 
         <td><input type="text" name="off[]" maxlength="3"></td> 
         <td><input type="text" name="seats[]" maxlength="3"></td> 
         <td><input type="text" name="dow[]" maxlength="7"></td> 
         <td><input type="button" value="Add" id="btn0" 
          onClick="addInput(<%=++count%>);"></td> 
         <td><input type="button" value="x" id="cross0" 
          style="display: none;" /></td> 
        </tr> 
       </tbody> 
      </table> 

     </div> 

Answer 1

JS Fiddle

這

$(".sd"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 
    $(".ed"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}) 

相反試試這個

$(".datepicker").datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 

Answer 2

的問題是在這裏

的onClick = 'addInput（ 「+（++計數）+」）;'/>

你在這裏算的值遞增，讓說計數在開始爲1，現在計數爲2，並在此之後，當您嘗試使用此代碼的申請日期選擇器：

$(".sd"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 
$(".ed"+count).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 

基本上你與類的.sd2和.ed2的元素，它不存在於申請日期選擇器。我希望澄清的問題

試試這個：

$(".sd"+(count-1)).datepicker({ dateFormat: 'ddMyy', minDate: '0'}); 
$(".ed"+(count-1)).datepicker({ dateFormat: 'ddMyy', minDate: '0'});