重複字段的jquery日期選擇器

Question

我知道這個問題以前已經被問過了，但我似乎無法得到以前的答案，因爲我的代碼有點不同。

所以我有一個重複字段，我正在嘗試使用datepicker。第一個實例工作正常，但如果我添加一行，日期選擇器將顯示在屏幕的另一部分上，並且單擊時不會將任何信息輸入到字段中。

這裏是我的代碼：

<script> 
jQuery(document).ready(function($) { 
    $('.metabox_submit').click(function(e) { 
     e.preventDefault(); 
     $('#publish').click(); 
    }); 
    $('#add-row').on('click', function() { 
     var row = $('.empty-row.screen-reader-text').clone(true); 
     row.removeClass('empty-row screen-reader-text'); 
     row.insertBefore('#repeatable-fieldset-one tbody>tr:last'); 
     return false; 
    }); 
    $('.remove-row').on('click', function() { 
     $(this).parents('tr').remove(); 
     return false; 
    }); 
    $('#repeatable-fieldset-one tbody').sortable({ 
     opacity: 0.6, 
     revert: true, 
     cursor: 'move', 
     handle: '.sort' 
    }); 

    $('.session-time').timepicker({ 
     'minTime': '8:00am', 
     'maxTime': '10:0pm', 
     'step': 15, 
    }); 

    $('.session-date').each(function() { 
     $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020' 
     }); 
    }); 
}); 
</script> 

}); 
</script> 
<div class="wrap"> 
<table id="repeatable-fieldset-one" class="form-table"> 
    <thead> 
     <tr> 
      <th>Remove</th> 
      <th>Session Date</th> 
      <th>Session Time</th> 
      <th>Sort</th> 
     </tr> 
    </thead> 
    <tbody> 

    <?php 
    if ($repeatable_fields) : 
     foreach ($repeatable_fields as $field) : // there are complete fields 
    ?> 
     <tr> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" value="<?php if($field['session_date'] != '') echo esc_attr($field['session_date']); ?>" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" value="<?php if($field['session_time'] != '') echo esc_attr($field['session_time']); ?>" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 


    <?php endforeach; 
     else : // show a blank one ?> 

     <tr> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 

    <?php endif; ?> 
    <!-- empty hidden one for jQuery --> 

     <tr class="empty-row screen-reader-text"> 
      <td><a class="button remove-row" href="#">-</a></td> 
      <td><input type="text" class="session-date" name="session_date[]" /></td> 
      <td><input type="text" class="session-time" name="session_time[]" /></td> 
      <td><a class="sort">|||</a></td> 
     </tr> 
    </tbody> 
</table> 

<p><a id="add-row" class="button" href="#">Add another</a></p> 
</div> 

Answer 1

對於其他人誰降臨在這個問題上，這裏是爲我工作的修補程序。我能夠爲datapicker獲得這項工作，但不能用於timepicker。

$(document).on('focus', '.session-date', function() { 
    $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020 
    }); 
}); 

只需使用代碼代替

$('.session-date').each(function() { 
    $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'mm-dd-yy', 
     yearRange: '2017:2020' 
    }); 
});