动态生成字段时jQuery Datetimepicker无法正常工作的问题求助

我明白你遇到的困扰了——动态添加的文本框没法正常触发年份选择器，这是因为原代码的初始化逻辑没考虑到动态元素的生命周期，咱们一步步来修复：

问题根源分析 #

你的代码是在已存在的.dateyear元素的点击事件里，批量给所有.dateyear初始化datepicker：

• 页面加载时就存在的第一个输入框，点击后能被初始化，但动态生成的新输入框，在你绑定点击事件时还未创建，自然没法触发这个初始化逻辑。
• 而且每次点击都会重新给所有.dateyear初始化一遍，容易造成重复绑定、选择器多次弹出的问题。

修复方案 #

方案1：事件委托+单元素初始化（推荐） #

把事件委托到父容器#acd，这样不管是原生的还是动态生成的.dateyear，点击时都能触发逻辑，而且只初始化当前被点击的元素（避免重复初始化）：

$(document).ready(function() {
  // 委托事件到父容器，覆盖所有现有/未来的.dateyear元素
  $('#acd').on('click', '.dateyear', function() {
    // 先判断当前元素是否已初始化，避免重复绑定
    if (!$(this).data('datepicker')) {
      $(this).datepicker({
        format: "yyyy",
        viewMode: "years",
        minViewMode: "years"
      });
    }
  });
});

方案2：动态生成元素后立即初始化（更优体验） #

如果你有动态添加输入框的代码，最好在生成新元素后直接给它初始化datepicker，这样不需要依赖点击事件，元素渲染完成就能用：

假设你添加新字段的函数是这样的，修改后：

// 示例：动态添加新年份输入框的函数
function addNewDateYearField() {
  var newField = `
    <div class="row">
      <div class="col-md-2">
        <div class="form-group">
          <input type="text" name="passyr[]" class="form-control dateyear">
        </div>
      </div>
    </div>
  `;
  // 将新元素添加到容器
  $('#acd').append(newField);
  // 给刚生成的最后一个.dateyear元素初始化选择器
  $('#acd .dateyear:last').datepicker({
    format: "yyyy",
    viewMode: "years",
    minViewMode: "years"
  });
}

额外注意事项 #

• 你当前引入的jQuery 2.1.1和datetimepicker 2.5.14版本是兼容的，无需更换；
• 尽量避免重复初始化同一个元素，否则可能出现选择器多次弹出的异常，方案1里的!$(this).data('datepicker')就是用来规避这个问题的。

内容的提问来源于stack exchange，提问作者Gabrielle-M