电商网站动态创建input number元素change事件失效求助

你的问题出在动态创建元素的事件绑定方式上，我来帮你拆解和解决：

核心原因 #

你当前使用的$("input[name='nameQty']").change(...)是直接绑定事件的方式，这种方式只能给执行代码时已经存在于DOM中的元素绑定事件。而你的input[name='nameQty']元素是点击"ADD TO BASKET"后才动态生成的，所以事件根本没绑定到这些新元素上，自然修改值时没有任何反应。

解决方案：使用jQuery事件委托 #

事件委托利用DOM的事件冒泡机制，把事件绑定到一个页面加载时就存在的父元素上，让父元素监听子元素的事件——不管子元素是一开始就存在，还是后来动态添加的，只要匹配指定的选择器，事件就会被触发。

修改后的JavaScript代码 #

我把你的代码做了格式化（提升可读性），并替换了事件绑定部分：

// 购物篮添加商品逻辑
$(".shopnow").click(function() {
  basketCounter++;
  if (basketCounter > 0) {
    $("#items-count").html(basketCounter);
  }
  var currentProduct = this.id;
  if (payForProducts.includes(currentProduct)) {
    document.getElementById(currentProduct + "Input").value++;
  } else {
    payForProducts.push(currentProduct);
    var ulEl = document.createElement("ul");
    var firstLi = document.createElement("li");
    basketContent.insertBefore(ulEl, checkout);
    firstLi.innerText = topProtein[currentProduct].name;
    ulEl.appendChild(firstLi);
    var secondLi = document.createElement("li");
    var input = document.createElement("input");
    input.setAttribute("class", "qtyproduct");
    input.setAttribute("id", currentProduct + "Input");
    input.setAttribute("name", "nameQty");
    input.setAttribute("type", "number");
    input.setAttribute("min", "0");
    input.setAttribute("value", "1");
    secondLi.appendChild(input);
    ulEl.appendChild(secondLi);
    var thirdLi = document.createElement("li");
    thirdLi.innerText = topProtein[currentProduct].price;
    ulEl.appendChild(thirdLi);
  }
});

// 改用事件委托绑定change事件
$("#basket-content").on("change", "input[name='nameQty']", function() {
  alert("testing here!");
});

关键说明 #

• 这里选择#basket-content作为父元素是因为它在页面加载时就已经存在于HTML中，是动态创建的input的父级容器。
• .on()方法的第一个参数是事件类型，第二个是目标子元素的选择器，第三个是事件处理函数。这样所有匹配input[name='nameQty']的元素（包括后续动态创建的）触发change事件时，都会执行你的测试提示逻辑。

现在你再修改数量输入框的值，就能看到测试提示框正常弹出了！

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