如何使用JS添加可拖拽字段？现有动态生成字段无法拖拽如何修改

问题原因 #

你目前的代码失效核心是事件绑定时机不对：页面加载完成执行$('.d').draggable()的时候，你还没有通过Add按钮生成任何.d类的输入框，所以这个绑定根本没作用到后续动态生成的元素上。同时你的聚焦事件选择器层级写错了，你创建的input本身就是.d类，不存在.d下嵌套的input元素。

修改方案 #

直接替换原有JS逻辑即可，修改后完整代码如下：

(function() {
  var counter = 0;
  var b = document.getElementById('b');
  var l = document.getElementById('l');
  var addInput = function() {
    counter++;
    var input = document.createElement("input");
    input.id = 'input-' + counter;
    input.className = 'd';
    l.appendChild(input);
    // 每次生成新input后立即绑定拖拽能力
    $(input).draggable({
      cancel: null
    });
    // 直接给当前input绑定点击聚焦事件
    $(input).click(function() {
      $(this).focus();
    });
  };
  b.addEventListener('click', function() {
    addInput();
  }.bind(this));
})();

HTML部分无需调整，替换完成后即可实现点击Add新增输入框、所有输入框可自由拖拽、点击时正常聚焦输入的效果。

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