如何为JS动态创建的DOM元素绑定事件监听器（加减输入框场景）

直接用事件委托绑定点击事件，同时把原代码中的jQuery语法替换为纯原生JS，就能解决动态元素无法绑定事件的问题：

// 递增逻辑（纯原生JS）
function incrementValue(e) {
  e.preventDefault();
  const fieldName = e.target.dataset.field;
  const parent = e.target.closest('div');
  const input = parent.querySelector(`input[name="${fieldName}"]`);
  const currentVal = parseInt(input.value, 10);

  if (!isNaN(currentVal)) {
    input.value = currentVal + 1;
  } else {
    input.value = 0;
  }
}

// 递减逻辑（纯原生JS）
function decrementValue(e) {
  e.preventDefault();
  const fieldName = e.target.dataset.field;
  const parent = e.target.closest('div');
  const input = parent.querySelector(`input[name="${fieldName}"]`);
  const currentVal = parseInt(input.value, 10);

  if (!isNaN(currentVal) && currentVal > 0) {
    input.value = currentVal - 1;
  } else {
    input.value = 0;
  }
}

// 事件委托：绑定到已存在的父元素（这里用document，建议换成更接近的固定容器，比如表单容器）
document.addEventListener('click', function(e) {
  // 判断点击的元素是否是目标按钮
  if (e.target.matches('.button-plus')) {
    incrementValue(e);
  } else if (e.target.matches('.button-minus')) {
    decrementValue(e);
  }
});

关键说明 #

1. 事件委托原理：把点击事件绑定到页面加载时就存在的父元素（比如document），动态创建的按钮点击时，事件会冒泡到父元素，父元素通过e.target.matches()判断触发源，再执行对应逻辑，避免了直接绑定动态元素失败的问题。
2. 原生JS替换jQuery：
   • 用e.target.dataset.field代替$(e.target).data('field')获取data属性
   • 用Element.closest('div')代替$(e.target).closest('div')查找最近父元素
   • 用Element.querySelector()代替parent.find()查找子元素
   • 直接操作input.value代替val()方法
3. 无需async函数：你的问题和异步操作无关，async无法解决动态元素绑定事件的问题，事件委托才是正确方向。

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