jquery datepicker 无法在通过 javascript 动态克隆或插入的输入框上正常工作，根本原因是 jquery ui 会为已初始化的元素添加 `hasdatepicker` 类和 `datepicker` 数据属性，导致重复绑定失败；需在克隆后手动清理并重新初始化。
当使用 .clone() 动态添加包含 .datepicker 输入框的表单片段时，原始日期控件的初始化状态（如 data(‘datepicker’)、class=”hasDatepicker”、内联事件绑定等）会被一并复制。而 jQuery UI Datepicker 内部通过检查这些状态来避免重复初始化——一旦发现目标元素已存在 hasDatepicker 类或相关数据，便直接跳过绑定，造成新克隆的输入框点击无响应。
因此，仅靠事件委托（如 $(‘body’).on(‘focus’, ‘.datepicker’, …)）是不够的：该方式虽能触发初始化逻辑，但若元素已被错误标记为“已初始化”，$(this).datepicker(…) 将静默失效。
✅ 正确做法是在每次克隆后，对新加入的 .datepicker 输入框执行「清理 → 初始化」两步操作：
- 移除可能冲突的 id 属性（避免 dom ID 重复）；
- 移除 hasDatepicker 类；
- 清除 datepicker 相关数据缓存（removeData(‘datepicker’)）；
- 解绑残留事件（unbind()，确保干净起始）；
- 显式调用 .datepicker(options) 进行初始化。
以下是修正后的 addNewField() 函数完整实现（兼容 jQuery 1.7+ 与 jQuery UI 1.12+）：
function addNewField() { count = totalFields() + 1; field = $("#dynamic-field-1").clone(); field.attr("id", "dynamic-field-" + count); // 注意：原示例中 children("label") 可能不准确（结构中无直接 label 子元素），建议改用 find 或忽略该行 field.find("input").val(""); // ✅ 关键修复：为所有新克隆的 .datepicker 输入框重置并初始化 field.find("input.datepicker") .removeAttr("id") // 避免重复 ID .removeClass("hasDatepicker") // 清除 jQuery UI 标记类 .removeData("datepicker") // 清除内部数据缓存 .off("focus") // 移除可能存在的委托 focus 事件（可选，增强健壮性） .datepicker(datePickerOptions); // 重新初始化 $(className + ":last").after(field); }⚠️ 注意事项：
- 不要省略 .off(“focus”) 或 .unbind()：防止旧事件处理器与新初始化逻辑冲突；
- 若页面中其他地方也使用了 $(‘body’).on(‘focus’, ‘.datepicker’, …)，建议完全移除该委托逻辑，改为仅在克隆时显式初始化，避免不可预测的多次触发；
- 确保 jQuery UI Datepicker 的 CSS 与 js 已正确加载，且 datepicker 方法可用（可通过 $.fn.datepicker 检查）；
- 克隆前原始 #dynamic-field-1 中的日期输入框必须已初始化一次（例如在 $(document).ready() 中调用过），否则 .clone() 不会携带初始状态，但此非必需——推荐统一在 addNewField() 中完成初始化，保持逻辑集中。
? 进阶提示：若动态字段数量较多或需频繁增删，可封装为可复用的初始化函数，例如：
function initDatepickers($container) { $container.find("input.datepicker").each(function() { const $input = $(this); if (!$input.hasClass("hasDatepicker")) { $input.datepicker(datePickerOptions); } }); } // 调用：initDatepickers(field);通过上述处理，即可确保每个动态生成的日期输入框均具备完整、独立的 Datepicker 功能，彻底解决“仅静态内容生效”的常见问题。