如何为动态追加的numberonly类输入框重新绑定事件？

这个问题我碰到过好多次啦——页面初始化时给.numberonly元素绑定的keydown和keyup事件，只会对当时已经存在于DOM中的元素生效，后来通过JS动态追加的元素并没有被绑定这些事件。给你两种靠谱的解决方案，看你习惯用哪种：

方案一：事件委托（推荐，一劳永逸） #

事件委托是利用DOM的事件冒泡机制，把事件绑定到一个已经存在的父元素上（比如你的#addinputdiv），然后在事件触发时判断目标元素是不是.numberonly类的输入框。这样不管是初始的还是后续动态添加的输入框，事件都会正常触发，不需要每次添加元素都做额外操作。

假设你原来的事件逻辑是限制输入只能是数字，那改成事件委托的代码如下：

// 绑定keydown事件到父元素
document.getElementById('addinputdiv').addEventListener('keydown', function(e) {
  // 确认触发事件的是.numberonly输入框
  if (e.target.classList.contains('numberonly')) {
    // 这里写你的numberonly keydown逻辑，比如只允许数字和退格键
    if (!/[0-9]/.test(String.fromCharCode(e.keyCode)) && e.keyCode !== 8) {
      e.preventDefault();
    }
  }
});

// 绑定keyup事件到父元素
document.getElementById('addinputdiv').addEventListener('keyup', function(e) {
  if (e.target.classList.contains('numberonly')) {
    // 这里写你的numberonly keyup逻辑
    console.log('keyup事件触发在数字输入框上');
  }
});

方案二：添加元素后手动绑定事件 #

如果你更倾向于保留原来的事件绑定逻辑，可以把事件处理逻辑封装成函数，每次动态创建输入框后，手动给新元素绑定事件。

第一步，封装事件绑定函数：

function bindNumberOnlyEvents(inputElement) {
  // 绑定keydown事件
  inputElement.addEventListener('keydown', function(e) {
    if (!/[0-9]/.test(String.fromCharCode(e.keyCode)) && e.keyCode !== 8) {
      e.preventDefault();
    }
  });
  // 绑定keyup事件
  inputElement.addEventListener('keyup', function(e) {
    console.log('keyup事件触发在数字输入框上');
  });
}

// 页面加载时给初始输入框绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.numberonly').forEach(input => {
    bindNumberOnlyEvents(input);
  });
});

第二步，修改你的addinputt()函数，创建新输入框后调用绑定函数：

function addinputt() {
  const parentDiv = document.getElementById('addinputdiv');
  const newInput = document.createElement('input');
  
  newInput.type = 'text';
  newInput.classList.add('numberonly');
  
  // 给新输入框绑定事件
  bindNumberOnlyEvents(newInput);
  
  parentDiv.appendChild(newInput);
}

小总结 #

如果需要频繁添加输入框，优先选事件委托，它更高效也更省心；如果只是偶尔添加元素，方案二也完全能解决问题。

内容的提问来源于stack exchange，提问作者Php Symfony Guru