试图测试输入更改方法但它似乎没有工作

时间：2018-05-12 22:04:23

标签： javascript jquery html

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

目前我正在尝试获取一个动态创建的输入数字元素，以提示警报消息（就像练习一样）以查看它是否有效。但是，当我更改输入数字元素时，似乎没有任何事情发生。我不确定究竟是什么问题。有人能协助吗？我把一个从一个对象中添加项目放在一起的函数运行得非常好，它只是改变了没有真正做任何事情的数量。

提前感谢所有有用的回复。

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

2 个答案:

答案 0 :(得分：1)

您的代码中出现了一些错误：

  • ulEl未附加到body元素。
  • 很少变数未声明
  • 最后$("input[name='nameQty']").change最好可以为添加到html主体的每个新输入进行自定义，在您的代码中，在可能要创建的任何新元素之前触发查询，因此它们不会被分配给事件监听器。

here is the summary of everything

答案 1 :(得分：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/

相关问题
最新问题