jQuery动态生成新字段时datepicker日期选择器不显示问题求助

修复方案 #

问题根因为两点：一是 datepicker 仅在页面首次加载时对已存在的输入框做了初始化绑定，后续动态新增的输入框没有执行绑定逻辑；二是动态生成的输入框使用了重复id属性，违反HTML id唯一规范导致选择器匹配异常。直接按照以下步骤修改代码即可：

1. 替换原有JS代码

把你现有的JS代码全部替换为以下内容：

$(document).ready(function() {
  var max_input_fields = 10;
  var add_input = $('.add-input');
  var input_wrapper = $('.input-wrapper');
  // 去掉重复id，新增通用类名date-input标识日期选择框
  var new_input = '<div class="col-lg-12  "><br><div class="col-md-12 select-pane "><label class="labels">Department</label><select class="form-control -sm h-50 w-100 " name="department" aria-label="Select Filter"><option>finace</option><option>music</option></select></div><div class="col-md-12"><label class="labels">Position Held </label><input type="text" class="form-control" placeholder="enter Position" name="positions"></div><div class="col-lg-12"><label class="labels">From</label><input type="text" name="From" class="form-control date-input" placeholder="From Date" /></div><div class="col-lg-12"><label class="labels">To</label><input type="text" name="to" class="form-control date-input" placeholder="To Date" /></div><a href="javascript:void(0);" class="col-lg-12 remove-input" title="Remove input"><button type="button" name="position_button">Remove</button></a></div>';

  var add_input_count = 1;
  // 全局配置datepicker默认格式
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  // 初始化页面默认存在的日期选择框
  $('.date-input').datepicker();

  $(add_input).click(function() {
    if (add_input_count < max_input_fields) {
      add_input_count++;
      // 插入新字段
      var $newEle = $(new_input).appendTo(input_wrapper);
      // 给新插入的字段里的日期输入框初始化datepicker
      $newEle.find('.date-input').datepicker();
    }
  });
  $(input_wrapper).on('click', '.remove-input', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    add_input_count--;
  });
});

2. 调整原有HTML代码

把初始存在的两个日期输入框的id属性去掉，新增date-input类名，修改后对应部分代码如下：

<div class="col-lg-12">
  <label class="labels">From</label>
  <input type="text" name="From" class="form-control date-input" placeholder="From Date" />
</div>
<div class="col-lg-12">
  <label class="labels">To</label>
  <input type="text" name="to" class="form-control date-input" placeholder="To Date" />
  <br>
  <a href="javascript:void(0);" class="col-lg-12 add-input" title="Add input"><button type="button" name="position_button">Add more positions</button></a>
</div>

可选优化：你当前HTML里引入了两次不同版本的jQuery，可能会导致功能异常，建议删掉其中任意一个jQuery引入代码。

修改完成后刷新页面即可，新增的字段也能正常弹出日期选择器。

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