동적으로 삽입 된 요소에 대한 datepicker가 작동하지 않음

Question

클릭 이벤트에 대해 호출되는 버튼에 대한 함수가 있습니다. 클릭하면 버튼의 행 바로 뒤에 요소 사본이 삽입됩니다. 날짜를 만들어야합니다. 새로 삽입 된 행 내부의 입력 필드에 대한 선택 도구입니다.

<tr class="tr_38"> 
    <td>Maths [ Math01 ]</td> 
    <td>Required</td> 
    <td> 
     <select style="width: 250px;" name="TeacherID[2318]" id="TeacherID[2318]"> 
     <option selected="" value="132">Dawn Herus - [ID : 132]</option> 
     <option value="246">Margaret Wilson - [ID : 246]</option> 
     </select> 
    </td> 
    <td> 
     <input class="date hasDatepicker" id="ExamDate_2318" name="ExamDate[2318]" value="02/28/2017" type="text"> 
     <input style="width: 100px;" id="ExamTime_2318" name="ExamTime[2318]" value="8:00" type="text"> 
    </td> 
    <td><input value="+" class="more-38-0 more_button" type="button"> 
    </td> 
    </tr> 

JQuery와 기능 :

`var counter = -1; 
    $(document).on ('click','.more_button',function(){ 
     var courseID=''; 
     var row_classname = $(this).closest('tr').prop('class'); 
     $.each($(this).prop('class').split(' '), function(i, name) { 
      if (name.indexOf('more-') > -1) { // or name.indexOf('toaster') === 0 
       courseID = name.split('-')[1]; 
       return false; 
      } 
     }); 
      var newrow = $('<tr class="'+row_classname+'"><td>'+$(this).parent().parent().find('td:eq(0)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(1)').text()+ 
      '</td><td>'+$(this).parent().parent().find('td:eq(2)').html()+'</td><td>'+ 
      $(this).parent().parent().find('td:eq(3)').html()+'</td><td><input type="button" value="+" class="more-'+ 
      courseID+'-1 more_button"><input type="button" class="remove" value="X">'+ 
      '</td></tr>'); 
      var $newrow = $(newrow); 
     $newrow.find('td:eq(2)').find('select').  prop('id','TeacherID['+counter+']').prop('name','TeacherID['+counter+']'); 
      $newrow.find('td:eq(3)').find('input[id^="ExamDate_"]'). 
     prop('id','ExamDate_'+counter).prop('name','ExamDate['+counter+']'); 

     $newrow.find('td:eq(3)').find('input[id^="ExamTime_"]'). 
     prop('id','ExamTime_'+counter).prop('name','ExamTime['+counter+']'); 
      $(newrow).insertAfter($(this).closest('tr')); 


      **var $examdate = $('#ExamDate_'+counter); 
      $examdate.datepicker();//this is not working** 

      $(this).hide(); 
      counter--; 
    });` 

Fiddle

Answer 1

나는 동적으로 입력 된 날짜 선택기에서 클래스를 제거하고 같은 요소에 다시 날짜 선택기를 할당했다.

$('#ExamDate_'+counter).removeClass('hasDatepicker'). 
     datepicker({ changeMonth: true,changeYear: true});