jQuery Repeater中动态新增项的Datepicker不生效如何解决

问题根本原因 #

jQuery Datepicker 仅会在初始化执行时给当前页面已存在的DOM元素绑定交互事件，Repeater动态生成的新DOM节点是在初始化完成后才插入页面的，没有触发过Datepicker的绑定逻辑，因此无法触发选择器弹窗。

解决方法 #

利用jQuery Repeater提供的show回调函数，该回调会在每一条新增项渲染完成后自动触发，你只需要把Datepicker的初始化逻辑放到该回调中，仅针对当前新增项内的日期输入框做绑定即可，避免重复绑定已有元素导致的冲突。

代码示例：

$('.你的repeater容器选择器').repeater({
  // 新增项完成渲染后的回调
  show: function () {
    // 仅选中当前新增项内的日期输入框做初始化
    $(this).find('.你的日期输入框class').datepicker({
      // 你原来的Datepicker配置参数，比如日期格式
      dateFormat: 'yy-mm-dd'
    });
    // 保留Repeater默认的新增项滑入动画，不要删除
    $(this).slideDown();
  },
  // 你原有其他的Repeater配置
})

异常排查方案 #

如果按上述配置后依然无法使用，可以按以下顺序排查：

• 确认动态生成的日期输入框的类名/选择器和find方法中使用的选择器完全一致，无拼写错误
• 打开浏览器控制台检查是否有脚本报错，确认脚本加载顺序正确：先加载jQuery，再加载jQuery Datepicker和Repeater插件
• 如果存在重复初始化的冲突，可以在初始化前先销毁已有的Datepicker实例，参考代码如下：

show: function () {
  const $dateInput = $(this).find('.你的日期输入框class');
  // 先销毁可能存在的旧实例，避免冲突
  if ($dateInput.hasClass('hasDatepicker')) {
    $dateInput.datepicker('destroy');
  }
  $dateInput.datepicker({
    dateFormat: 'yy-mm-dd'
  });
  $(this).slideDown();
}

内容的提问来源于stack exchange，提问作者Metin Saraç