jQuery Datepicker在动态内容上无法加载的问题排查

静态内容上的jQuery Datepicker能正常工作，但添加动态生成的内容后，日期选择器无法加载，请问可能是什么原因？

代码片段 #

HTML代码 #

<div class="col-md-10 dynamic-field mb-3" id="dynamic-field-1" >
    <div class="row">
        <div class="col-md-2">
            <div class="form-group">
                <label for="field" class="hidden-md">Select Item</label>
                <!-- <input type="text" id="field" required class="form-control" name="type_of_cultivation[]" /> -->
                <select class="form-control" id="field" required name="type_of_cultivation[]">
                  <option value="">Choose  item</option> 
                    @foreach($items as $row)
                      <option value="{{$row->id}}">{{$row->item_name}} - {{$row->item_unit}}</option>
                    @endforeach 
                 </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="field" class="hidden-md">Cultivation Date</label>
                <input type="text"  class="form-control datepicker" required placeholder="2023-02-28" name="cultivation_date[]" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label>Harvest Date</label>
                <input type="text"  class="form-control datepicker" required placeholder="2023-03-28" name="harvest_date[]">
            </div>
        </div>
       
    </div>
</div>

jQuery代码 #

var datePickerOptions = {
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
}
   
$('body').on('focus',".datepicker", function(){
   $(this).datepicker(datePickerOptions);
});
 

$(document).ready(function() {
 var buttonAdd = $("#add-button");
  var buttonRemove = $("#remove-button");
  var className = ".dynamic-field";
  var count = 0;
  var field = "";
  var maxFields =50;

  function totalFields() {
    return $(className).length;
  }

  function addNewField() 
  {
    count = totalFields() + 1;
    field = $("#dynamic-field-1").clone();
    field.attr("id", "dynamic-field-" + count);
    field.children("label").text("Field " + count);
    field.find("input").val("");
    $(className + ":last").after($(field));

  }

  function removeLastField() {
    if (totalFields() > 1) {
      $(className + ":last").remove();
    }
  }
});

问题原因及解决办法 #

核心原因 #

用clone()复制动态字段时，默认会复制原元素上绑定的事件及Datepicker初始化后的内部状态，但克隆后的元素无法正确继承Datepicker的实例绑定。另外，当前的事件委托写法存在重复初始化的风险，也可能因克隆元素的残留状态导致触发异常。

具体修复方案 #

1. 克隆干净元素（推荐）
   使用clone(false)代替clone()，不复制原元素的事件和状态，确保新元素是未初始化的“干净”状态：

   field = $("#dynamic-field-1").clone(false);
   

2. 手动初始化新字段的Datepicker
   在新字段添加到DOM后，直接找到其中的.datepicker元素并初始化，不需要依赖事件委托：

   function addNewField() 
   {
     count = totalFields() + 1;
     field = $("#dynamic-field-1").clone(false);
     field.attr("id", "dynamic-field-" + count);
     field.children("label").text("Field " + count);
     field.find("input").val("");
     // 添加到DOM后立即初始化Datepicker
     $(className + ":last").after(field);
     field.find(".datepicker").datepicker(datePickerOptions);
   }
   

3. 优化事件委托（可选）
   若坚持用事件委托，可利用Datepicker初始化后自动添加的has-datepicker类，避免重复初始化：

   $('body').on('focus',".datepicker:not(.has-datepicker)", function(){
     $(this).datepicker(datePickerOptions).addClass('has-datepicker');
   });
   

内容的提问来源于stack exchange，提问作者Hola