模态框表格Datepicker第一行失效仅后续动态行生效是什么原因？

问题根因 #

• 初始渲染的第一行没有在正确时机执行datepicker初始化：你将初始化逻辑仅放在了新增按钮的点击事件中，页面加载/模态框显示时没有对已存在的第一行做初始化，导致未点击新增按钮时第一行日期组件无法触发。
• 原有代码执行顺序错误：先执行全局datepicker初始化，再追加新行，导致刚新增的行没有被本次初始化覆盖，逻辑存在时序缺陷。

修正方案 #

调整初始化逻辑，抽离公共配置，在模态框显示完成时初始化已有行的日期组件，新增行时先追加DOM再单独初始化当前行的日期组件，避免重复全量初始化。
修正后代码如下：

// 公共datepicker配置
const datepickerConfig = {
  autoHide: true,
  zIndex: 999998,
  format: "dd.mm.yyyy",
};

var satirsayi = 0;

// 模态框显示完成后初始化已有行的日期组件，#exampleModal替换为你实际使用的模态框ID
$('#exampleModal').on('shown.bs.modal', function () {
  $('[data-toggle="datepicker"]').datepicker(datepickerConfig);
})

$('#satirekle').click(function() {
  ++satirsayi;
  // 构造新行DOM
  const newRow = $(`
  <tr>
    <td>${satirsayi}</td>
    <td><input type="text" name="vade" id="vade${satirsayi}" class="form-control"/></td>
    <td><input class="edit-item-date form-control vvtarih${satirsayi}" data-toggle="datepicker" name="vadetarih" id="edit_due_date${satirsayi}" autocomplete="off"></td>
    <td><input type="text" name="vadegun" id="vadegun${satirsayi}" class="form-control"/></td>
    <td><input type="text" name="vadeoran" id="vadeoran${satirsayi}" class="form-control"/></td>
    <td><input type="text" name="vadeborc" id="vadeborc${satirsayi}" class="form-control"/></td>
    <td><input type="text" name="vadealacak" id="vadealacak${satirsayi}" class="form-control"/></td>
    <td><input type="text" class="genelkalan form-control" name="vadekalan" id="vadekalan${satirsayi}" disabled/></td>
  </tr>
  `);
  // 追加新行到表格
  $('.odemeplanitablosu tbody').append(newRow);
  // 仅初始化当前新增行的日期组件
  newRow.find('[data-toggle="datepicker"]').datepicker(datepickerConfig);
})

注意事项 #

• 原有代码最后一个input重复定义了class属性，会导致属性失效，修正代码中已经做了合并处理。
• 如果你使用的不是Bootstrap模态框，将shown.bs.modal替换为对应UI库的模态框显示完成事件即可。
• 避免重复初始化已经绑定过datepicker的元素，防止出现异常交互行为。

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