为何仅首个input的onchange可触发createLink？求最优解决方案

<p class="label">
  <form id="links">
    <input type="text" class="insert" name="input" onchange="createLink()">
    <br>
  </form>
</p>
</div>
<script>
 function createLink() {
   var newline = document.createElement("br");
   var input = document.createElement("input");
   input.type = "text";
   input.name = "input";
   input.onchange = "createLink()";
   var element = document.getElementById("links");
   element.appendChild(newline);
   element.appendChild(input);
 }
</script>

问题原因 #

核心问题出在动态创建元素的事件绑定方式错误：

• 页面初始的input是通过HTML属性onchange="createLink()"绑定事件，浏览器会自动将字符串解析为可执行的函数调用；
• 但你在JS中给新生成的input赋值input.onchange = "createLink()"时，是把字符串直接赋值给事件属性，而非函数引用。浏览器无法识别这个字符串为可执行逻辑，所以新input触发change事件时不会执行createLink函数。

最佳解决方案 #

推荐两种实用方案，其中事件委托更适合大量动态元素的场景：

方案1：修正事件绑定逻辑

把事件属性直接赋值为函数引用，而非字符串：

function createLink() {
  var newline = document.createElement("br");
  var input = document.createElement("input");
  input.type = "text";
  input.name = "input";
  // 直接绑定函数本身，而非字符串形式
  input.onchange = createLink;
  var element = document.getElementById("links");
  element.appendChild(newline);
  element.appendChild(input);
}

修改后每个新生成的input都会正确绑定createLink函数，触发change时就能生成新输入框。

方案2：使用事件委托（更高效）

不需要给每个input单独绑定事件，而是给父容器（form）绑定一次事件，利用事件冒泡机制处理所有input的change事件。这种方式避免了重复绑定，性能更优：

<p class="label">
  <form id="links">
    <input type="text" class="insert" name="input">
    <br>
  </form>
</p>
</div>
<script>
// 给form绑定事件委托
document.getElementById('links').addEventListener('change', function(e) {
  // 仅处理input元素的change事件
  if(e.target.tagName === 'INPUT') {
    var newline = document.createElement("br");
    var input = document.createElement("input");
    input.type = "text";
    input.name = "input";
    this.appendChild(newline);
    this.appendChild(input);
  }
});
</script>

无论新增多少input，只要在form内部，change事件都会被父容器捕获并处理，代码更简洁且维护性更强。

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