克隆表单后输入框数值跳转JS功能失效的技术问询

我看了你的问题和代码，核心问题出在动态生成元素的事件绑定以及一处jQuery API的误用上，下面给你两种可行的解决方案：

问题根源分析 #

1. 静态事件绑定的局限性：你原来的$('input[id^="montoa"]').on("click", ...)是直接绑定在页面加载时已存在的元素上，克隆出来的新输入框是后续动态添加的DOM元素，所以不会触发这个点击事件。
2. jQuery API误用：代码里使用了$('#'+montoa_id).value，这是原生DOM对象的写法，但你这里操作的是jQuery对象，应该用.val()方法来获取和设置输入框的值。

解决方案一：事件委托（推荐） #

事件委托是将事件绑定到父级容器（比如表单本身），当事件冒泡到父级时，再判断目标元素是否匹配指定选择器。这种方式只需要绑定一次，就能作用于所有现有和未来动态生成的元素。

替换你原来的动态绑定代码为：

// 绑定到form元素，监听所有id以montoa开头的输入框点击事件
$('form').on('click', 'input[id^="montoa"]', function(e) {
  var montoa_id = this.id;
  // 提取ID中的数字部分
  var num = montoa_id.match(/(\d+)/g)[0];
  var montob_id = 'montob' + num;
  
  // 用jQuery的.val()方法正确读写输入框值
  $('#' + montob_id).val($('#' + montoa_id).val());
  $('#' + montoa_id).val('');
});

解决方案二：克隆时直接绑定事件 #

如果你更倾向于在克隆元素的同时单独绑定事件，可以修改你的clone函数，在克隆完成后给新生成的输入框绑定点击逻辑：

修改后的clone函数关键部分：

function clone(){ 
  cloneIndex++; 
  $(this).parents(".clonedInput").clone()
    .appendTo("form")
    .attr("id", "clonedInput" + cloneIndex)
    .find("*")
    .each(function() { 
      var id = this.id || ""; 
      var match = id.match(regex) || []; 
      if (match.length == 3) { 
        this.id = match[1] + (cloneIndex); 
      } 
    })
    // 给当前克隆块内的montoa输入框绑定点击事件
    .find('input[id^="montoa"]')
    .on('click', function(e) {
      var montoa_id = this.id;
      var num = montoa_id.match(/(\d+)/g)[0];
      var montob_id = 'montob' + num;
      
      $('#' + montob_id).val($('#' + montoa_id).val());
      $('#' + montoa_id).val('');
    })
    .end() // 回到克隆的.clonedInput元素上下文
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove); 
  return false; 
}

总结 #

• 优先选择事件委托方案，它更简洁高效，不需要每次克隆都重复绑定事件，维护成本更低。
• 务必注意jQuery对象和原生DOM对象的API区别：jQuery对象用.val()读写值，原生DOM对象用.value。

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