在文本框中動態添加日期選擇器

Question

當我的頁面加載時，我有一行，通過點擊添加按鈕它會添加一行。 但是從下面的代碼中，日期選取器只顯示第一行而不是動態添加行。 如果我刪除'第2部分'的代碼，然後反向將work.I需要both.Please幫助。

//===========portion 1============ 
var i = 0; 
$(document).ready(function() { 
    $("#add").click(function() { 
     i++; 

     $(".normal-tble tbody tr:first").clone().find("input,img").each(function() { 
      var tempId = $(this).attr("id"); 
      var name_Attr = $(this).attr("name"); 
      $(this).attr("id",$(this).attr("id")+"_"+(i)) 

      if(tempId!='availability' && tempId!='remove') { 
       $(this).attr("name",name_Attr.replace('0',i)); 

       if(tempId=='number') { 
        $(this).on("blur",isValidNumber); 
        $(this).val(0); 
       } else { 
        $(this).val(''); 
       } 

       if(tempId=='expectedServiceDate') { 
        $(this).datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0}); 
       } 

      } else if(tempId=='availability') { 
       $(this).on("click",checkAvaialability); 
      } else if(tempId=='remove') { 
       $(this).on("click",onRemove); 
      }   

     }).end().appendTo(".normal-tble"); 

    }); 
//=======portion 2=============== 
$('#expectedServiceDate').datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0}); 
//============================================================== 

<table class="normal-tble"> 
    <thead> 
     <tr>       
      <th scope="col">Number</th> 
      <th scope="col">For Service</th> 
      <th scope="col">Expected Service Date</th> 
      <th scope="col">Comments</th> 
      <th scope="col">Check Availability</th> 
      <th scope="col">Remove</th> 
      <th scope="col"><img src="<c:url value="/resources/images/add2.png"/>" width="18" height="17" id="add"></th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr class="second"> 
      <td style="text-align:center"><form:input path="premiumList[0].number" id="number" class="tfl-02 qtyText"/></td> 
      <td style="text-align:center"><form:input path="premiumList[0].forService" id="forService" class="tfl-02"/></td> 
      <td style="text-align:center"><form:input path="premiumList[0].expectedServiceDate" id="expectedServiceDate" class="tfl-02" readonly="true"/></td> 
      <td style="text-align:center"><form:input path="premiumList[0].comments" id="comments" class="tfl-02"/></td> 
      <td style="text-align:center"><img src="<c:url value="/resources/images/view.png"/>" alt="view" id="availability"></td> 
      <td style="text-align:center"><img src="<c:url value="/resources/images/remove.png"/>" alt="remove" id ="remove"></td> 
      <td></td> 

     </tr> 

    </tbody> 
</table> 

Answer 1

這是因爲該元素尚未創建。爲了使動態行發生事件，您需要：

$("body").on("focus", ".mydate", function() { 
    $(this).datepicker({ 
     todayBtn: "linked" 
    }) 
});