拖拽knob生成坐标表单时console值正常但input框偶现无值该如何修复

• 核心错误出现在给表单input设置data-id的逻辑：你在遍历当前form下的input时，误用了全局选择器$('input')，而非当前正在遍历的input元素$(this)，这会导致每次新增knob时，页面上所有已存在的input的data-id都会被覆盖为本次新生成的UUID。你赋值后立刻打印日志是正常的，等后续新增其他knob时，旧input的data-id被覆盖，你再查看旧表单时，输入框已经不属于任何你能匹配到的选择器，拖拽旧knob时也无法找到对应input更新，才会出现看似偶发的无值情况。
• 次要问题是可编辑knob的拖拽事件绑定逻辑：每次drop触发时你都选中所有.editable元素重新绑定draggable事件，旧元素会被重复绑定，且闭包捕获的UUID永远是最新生成的，拖拽旧knob时只会更新最新表单的坐标值，旧表单的输入框自然不会更新。

1. 修改input遍历逻辑，将全局选择器替换为当前遍历元素：

$("form[data-id=" + UUID + "]").find('input').each(function() {
  // 把原代码里的$('input')改为$(this)，避免覆盖其他input的data-id
  $(this).attr('data-id', UUID);
  $(this).attr('name', $(this).attr('name') + "[]");
});

2. 仅给本次新生成的knob元素绑定拖拽事件，不要选中所有已存在的.editable元素，避免重复绑定和闭包问题：

// 把原代码里的$(".editable").draggable(...)替换为下面的代码
$item.draggable({
  containment: "#droppable",
  appendTo: "#droppable",
  drag: function(event, ui) {
    $("#dragItemPositionX[data-id=" + UUID + "]").val(ui.position.left);
    $("#dragItemPositionY[data-id=" + UUID + "]").val(ui.position.top);
  }
});

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