使用jQuery克隆元素后datetimepicker焦点跳转至源输入框的问题

问题场景 #

• 页面通过PHP填充初始数据，日期输入框添加了datetimepicker类，每行以.div-item-wrapper容器包裹成表格行结构
• 每行带添加按钮，点击后用clone(true, true)克隆当前行，追加至.div-items-wrapper容器中
• 异常表现：克隆后的日期输入框点击时，焦点自动跳转到源输入框，日历弹窗也显示在源输入框位置，尝试常规动态绑定方案无效

核心原因 #

clone(true, true)会完整复制元素的所有事件绑定和插件内部存储的数据，而datetimepicker插件初始化时会绑定源元素的DOM引用、位置信息等状态，克隆后的新元素继承了这些关联，导致插件行为仍指向源元素。

解决方案 #

步骤1：仅克隆DOM结构，不复制事件和数据 #

放弃全量复制，只克隆元素结构：

var div_item_clone = $(this).closest('.div-item-wrapper').clone();
$('.div-items-wrapper').append(div_item_clone);

步骤2：重新初始化克隆元素的datetimepicker #

克隆完成后，手动为新元素内的日期输入框初始化插件：

div_item_clone.find('.datetimepicker').datetimepicker();

步骤3：手动绑定自定义事件（如有） #

如果原行有自定义交互事件（如删除按钮），编写通用绑定函数，克隆后为新行重新绑定：

// 定义行事件绑定的通用函数
function bindRowEvents($row) {
  // 绑定添加按钮事件示例
  $row.find('.add-btn').on('click', function() {
    // 你的添加逻辑
  });
  // 绑定删除按钮事件示例
  $row.find('.delete-btn').on('click', function() {
    $(this).closest('.div-item-wrapper').remove();
  });
}

// 页面加载时为初始行绑定事件
$('.div-item-wrapper').each(function() {
  bindRowEvents($(this));
});

// 克隆后为新行绑定事件+初始化datetimepicker
var div_item_clone = $(this).closest('.div-item-wrapper').clone();
$('.div-items-wrapper').append(div_item_clone);
bindRowEvents(div_item_clone);
div_item_clone.find('.datetimepicker').datetimepicker();

关键说明 #

不要依赖clone(true, true)复制插件事件，第三方插件（如datetimepicker）的内部状态和DOM关联无法通过简单克隆完全分离。重新初始化插件可让其绑定到新DOM元素，生成独立的焦点和弹窗位置逻辑。

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