javascript - 尝试测试输入更改方法，但似乎不起作用

Question

我目前正在开发一个电子商务网站。

目前，我正在尝试获取动态创建的输入数字元素，以提示警报消息(就像实践一样)以查看它是否有效。但是，当我更改输入数字元素时，似乎没有任何反应。我不确定问题到底是什么。有人可以帮忙吗？我组合在一起从对象添加项目的函数工作得很好，它只是改变了数量，并没有真正做任何事情。

预先感谢所有有用的回复。

$(".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);
  }

})

$("input[name='nameQty']").change(function() {
  alert("testing here!");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="basket-content">
  <h1>YOUR SHOPPING BASKET</h1>
  <ul id="basket-headings">
    <li>PRODUCT</li>
    <li>QTY</li>
    <li>PRICE</li>
  </ul>
  <button id="checkoutcomplete">COMPLETE ORDER</button>
  <span class="close-window">CLOSE WINDOW</span>
</div>

<section id="protein-products">

<h1>TOP SELLING PROTEIN RANGE</h1>

<div class="scroll-div">

<span id="left-scroll-protein" class="scrolling-icon"><i class="fas fa-chevron-left"></i></span>

<span id="right-scroll-protein" class="scrolling-icon"><i class="fas fa-chevron-right"></i></span>

</div>

<div id="protscrollproducts">

<div class="protein-product">

<img src="images/index/protein1.jpg">

<img src="images/5star.jpg">

<span class="heading">100% Whey Protein Professional</span>

<span class="product-price">&pound26.39</span>

<button class="more-info">MORE INFO</button>
<button id="product1" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein2.jpg">

<img src="images/5star.jpg">

<span class="heading">MUSCLE MILK (Vanilla) 1120g</span>

<span class="product-price">&pound31.20</span>

<button class="more-info">MORE INFO</button>
<button id="product2" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein3.jpg">

<img src="images/5star.jpg">

<span class="heading">Organic Protein Plant-Based Protein Powder</span>

<span class="product-price">&pound13.78</span>

<button class="more-info">MORE INFO</button>
<button id="product3" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein4.jpg">

<img src="images/5star.jpg">

<span class="heading">Combat 100% Ultra Premium Whey</span>

<span class="product-price">&pound12.99</span>

<button class="more-info">MORE INFO</button>
<button id="product4" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein5.jpg">

<img src="images/5star.jpg">

<span class="heading">Builder's Protein Bars Box Chocolate - 12 Bars</span>

<span class="product-price">&pound15.39</span>

<button class="more-info">MORE INFO</button>
<button id="product5" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein6.jpg">

<img src="images/5star.jpg">

<span class="heading">Ultimate Nutrition: CarneBOLIC protein</span>

<span class="product-price">&pound42.99</span>

<button class="more-info">MORE INFO</button>
<button id="product6" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein7.jpg">

<img src="images/5star.jpg">

<span class="heading">Pure Protein: 100% Whey (vanilla)</span>

<span class="product-price">&pound18.99</span>

<button class="more-info">MORE INFO</button>
<button id="product7" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein8.jpg">

<img src="images/5star.jpg">

<span class="heading">BodyLab: Fat Burning Protein (Vanilla)</span>

<span class="product-price">&pound16.99</span>

<button class="more-info">MORE INFO</button>
<button id="product8" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein9.jpg">

<img src="images/5star.jpg">

<span class="heading">Plant Based: Tone It Up Protein</span>

<span class="product-price">&pound12.99</span>

<button class="more-info">MORE INFO</button>
<button id="product9" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein10.jpg">

<img src="images/5star.jpg">

<span class="heading">Olly: Nourishing Smoothie Protein</span>

<span class="product-price">&pound17.99</span>

<button class="more-info">MORE INFO</button>
<button id="product10" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein11.jpg">

<img src="images/5star.jpg">

<span class="heading">Premier Protein x 4 (Chocolate)</span>

<span class="product-price">&pound11.99</span>

<button class="more-info">MORE INFO</button>
<button id="product11" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein12.jpg">

<img src="images/5star.jpg">

<span class="heading">Orgain: Organic Slim Protein</span>

<span class="product-price">&pound16.49</span>

<button class="more-info">MORE INFO</button>
<button id="product12" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein13.jpg">

<img src="images/5star.jpg">

<span class="heading">Only Protein: Whey Vanilla</span>

<span class="product-price">&pound15.99</span>

<button class="more-info">MORE INFO</button>
<button id="product13" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein14.jpg">

<img src="images/5star.jpg">

<span class="heading">Muscle Milk: Strawberry Whey</span>

<span class="product-price">&pound21.99</span>

<button class="more-info">MORE INFO</button>
<button id="product14" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein15.jpg">

<img src="images/5star.jpg">

<span class="heading">Kodiak Cakes: Protein Flapjack On The Go x 12</span>

<span class="product-price">&pound19.99</span>

<button class="more-info">MORE INFO</button>
<button id="product15" class="shopnow">ADD TO BASKET</button>


</div>

<div class="protein-product">

<img src="images/index/protein16.jpg">

<img src="images/5star.jpg">

<span class="heading">EAS: 100% Whey Protein 907g Chocolate</span>

<span class="product-price">&pound12.99</span>

<button class="more-info">MORE INFO</button>
<button id="product16" class="shopnow">ADD TO BASKET</button>


</div>


</div>

</section>

Answer 1

既然你使用的是 jQuery，不妨让事情变得可读:

$(`<ul>
    <li>${topProtein[currentProduct].name}</li>
    <li>
      <input class="qtyproduct" id="${currentProduct}Input" name="nameQty" type="number" min="0" value="1">
    </li>
    <li>${topProtein[currentProduct].price}<li>
  </ul>`).insertBefore(basketContent);

http://api.jquery.com/insertBefore/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

至于什么也没发生，事件处理程序只能应用于 DOM 中已经存在的元素。如果您要动态添加内容，则必须在插入后重新应用处理程序，或者将处理程序附加到非动态添加的父级，然后使用选择器。

$(permanent parent element).on('change', 'input[name="nameQty"]', function() {
  alert("testing here!");
})

http://api.jquery.com/on/