JQuery DatePicker не работает, когда щелкнули Добавить новую строку link

Question

Я пытаюсь добавить новую строку, когда я нажму ссылку. но jquery не работает. на jsfiddle он запускается, но не добавляет новую строку. здесь jsfiddle. add_field() добавляет новые пустые входы, которые невидимы в моей форме.

<script type="text/javascript"> 
    function add_field(){ 
     var cont = document.getElementById('addhere'); // refer to the div 
     var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div 
      // create a div element 
      var div1 = document.createElement('div'); 
      // Get template data 
      div1.innerHTML = document.getElementById('fieldtpl').innerHTML; 
      // append to div, so that template data becomes part of document 
      document.getElementById('addhere').appendChild(div1); 
    } 

    $(".datepick").each(function() { 
     $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true 
     }); 
    }); 
    </script> 

<form name="ExtendForm" id="ExtendForm" method="get" action=""> 
    <a href="javascript:void(0);" onClick="add_field();">Add new line</a> 
    <BR> 
    <div id="container1" style="position:fixed;"> 
     <div id="stid" style="float:left; width:200px;"> 
      Student ID 
     </div> 
     <div id="sdate" style="float:left; width:200px;"> 
      Start 
     </div> 
     <div id="fdate" style="float:left; width:200px;"> 
      Finish 
     </div> 
     <div id="addhere" style="float:relative; width:600px;"> 
      <div id="stid" style="float:left; width:200px;"> 
       <input type="text" name="studentid" id="studentid"> 
      </div> 
      <div id="sdate" style="float:left; width:200px;"> 
       <input name="start" class="datepick"> 
      </div> 
      <div id="fdate" style="float:left; width:200px;"> 
       <input name="finish" class="datepick"> 
      </div> 
     </div> 

     <div id="fieldtpl" style="display:none;"> 
      <div id="stid" style="float:left; width:200px;"> 
       <input type="text" name="studentid" id="studentid"> 
      </div> 
      <div id="sdate" style="float:left; width:200px;"> 
       <input name="start" class="datepick"> 
      </div> 
      <div id="fdate" style="float:left; width:200px;"> 
       <input name="finish" class="datepick"> 
      </div> 
     </div> 

     <div id="sbmt" style="width:600px; text-align:center"> 
      <input type="submit" name="saveForm" id="saveForm" value="Submit"> 
     </div> 
    </div> 
</form> 

Answer 1

Используйте этот ...

$(document).ready(function(){ 
    setDatePicker(); 
}); 

$('#addLine').on('click', function(){ 
     var cont = document.getElementById('addhere'); // refer to the div 
     var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div 
     // create a div element 
     var div1 = document.createElement('div'); 
     // Get template data 
     div1.innerHTML = document.getElementById('fieldtpl').innerHTML; 
     $('#addhere').append(div1.innerHTML); 
     setDatePicker(); 
    }); 

function setDatePicker() { 
    $("#addhere .datepick").each(function() { 
     $(this).datepicker({ 
      changeMonth: true, 
      changeYear: true 
     }); 
    }); 
} 

Смотрите эту DEMO

Answer 2

.Он работает here.You необходимо выбрать вариант кузова с левой side.I однажды разместил ссылку в комментарии section.check него