在 jQuery 中克隆包含动态修改或新增的 元素时，原生 DOM 克隆（如 clone()）不会自动同步用户当前输入的 value 属性（因 value 是 DOM 属性而非 HTML 属性），导致克隆结果仍显示初始 value 或为空。解决方案是监听 input 事件，将实时值反向写入 value 特性（attribute），确保克隆时能正确捕获。
在 jquery 中克隆包含动态修改或新增的 `` 元素时，原生 dom 克隆（如 `clone()`）不会自动同步用户当前输入的 `value` 属性（因 `value` 是 dom 属性而非 html 属性），导致克隆结果仍显示初始 `value` 或为空。解决方案是监听 `input` 事件，将实时值反向写入 `value` 特性（attribute），确保克隆时能正确捕获。
当你使用 $('html').clone() 或 $(selector).clone(true) 处理表单元素时，需明确区分两个概念：
- HTML 属性（attribute）：即 中的 value，可通过 .attr('value') 读取，且会被 .clone() 复制；
- DOM 属性（property）：即用户实际输入后 inp.value 的运行时值，它不会自动反映到 HTML attribute 上，因此克隆时丢失。
默认情况下，浏览器仅在元素初始化时将 value attribute 同步为 property；后续用户输入只会更新 property，而 attribute 保持不变。这就是为何你遍历 inp.value 能拿到最新值，但克隆后的元素却“回退”到初始状态——因为克隆操作复制的是原始 HTML 结构（含旧 attribute）。
✅ 正确做法：在用户输入时主动将 property 值同步回 attribute：
// 全局监听所有 input 元素的实时输入（推荐）
$(document).on('input', 'input', function(e) {
$(this).attr('value', e.target.value);
});
// 或更精准地监听 text/textarea/select（避免对 checkbox/radio 的误操作）
$(document).on('input', 'input[type="text"], input[type="password"], textarea', function(e) {
$(this).attr('value', e.target.value);
});
⚠️ 注意事项：
- 使用 input 事件（非 change）以支持即时响应（包括粘贴、拖拽、IME 输入等）；
- 避免对 type="checkbox" 或 type="radio" 直接设置 value attribute —— 它们的状态应通过 checked 属性控制；
- 若页面存在大量输入框，该监听器性能友好（事件委托 + 轻量赋值），无需额外节流；
- 若使用原生 JS，等效写法为：
document.addEventListener('input', e => { if (e.target.matches('input:not([type="checkbox"]):not([type="radio"])')) { e.target.setAttribute('value', e.target.value); } });
? 补充技巧：若仅需获取当前所有输入值（无需克隆 DOM），可直接序列化：
const formData = $('form').serialize(); // URL 编码字符串
// 或构建对象
const values = {};
$('input, textarea, select').each(function() {
const $el = $(this);
if ($el.is(':enabled') && !$el.is('[type="checkbox"]:not(:checked), [type="radio"]:not(:checked)')) {
values[$el.attr('name') || $el.attr('id')] = $el.val();
}
});
总结：DOM 克隆本身无错，问题本质在于 HTML attribute 与 DOM property 的同步缺失。通过 input 事件桥接二者，即可让动态表单在克隆、导出、快照等场景中始终反映真实用户状态。
