動的に挿入された要素の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});