时间戳

首页 > 解决方案 > 在 DOM 中附加 HTML，选择器看不到

javascript - 在 DOM 中附加 HTML，选择器看不到

问题描述

当我添加一个新项目时，查询选择器innerHTML似乎没有添加它。

所以当我尝试计算我的项目时。我只计算原始的，而不是新生成的。

即使当您console.log()通过变量元素时，它也只会显示原始元素。

所有这些元素都具有与原始元素相同的类名。

只是无法让它们被看到或添加到生成的项目上。

小提琴代码片段。

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');
//
let theform = document.querySelector(".theform");
let newitem = document.querySelector('.new-item');
let createBtn = document.getElementById("create");
let theItem = document.querySelector(".newStuff");
//


form.addEventListener("click",function(e){

let theHtml = `
 <div>
      <span class="cost">${newitem.value}</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      </div>
      <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
`


});

cal.addEventListener('mouseover', function(e) {
  console.log('total', total);
  for (var i = 0; i < price.length; i++) {
    let xPrice = price[i].innerHTML.split("$");
    let parsePrice = parseFloat(xPrice[1]);
    if (textval[i].value === "" || isNaN(textval[i].value)) {

   console.log("No Good");

    } else {
      let x = parseFloat(textval[i].value);
      let y = parsePrice;

      let z = x * y;

      total[i].innerText = z.toFixed(2);


      total[i].innerText = z;

      for (let k = 0; k < total.length; k++) {
        let j = parseFloat(total[k].innerHTML);

        console.log(j);

      }
    }
  }
});
<body>
  <div class="main">
    <span class="title">A Title</span>
  </div>
  <div class="content">
    <div class="item">
      <span>Item 1</span>
    </div>
    <div>
      <span class="cost">$100.00</span>
    </div>
    <div id="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      <p class="error"></p>
    </div>
    <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
  </div>
  <br><br>
  <div class="main">
    <span class="title">A Title</span>
  </div>
  <div class="content">
    <div class="item">
      <span>Item 2</span>
    </div>
    <div>
      <span class="cost">$50.00</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      <p class="error"></p>
    </div>
    <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
  </div>
  <form class ='theform'>
 <label>NewItem</label><input placeholder="0" class="new-item">
  <button id="create">create</button>
  </form>

  <span class ="newStuff"></span>

  <div class="calc-button">
    <button id="calc">Calculate Prices</button>
  </div>

</body>

标签： javascriptdom

解决方案

@Phil 是正确的。您在脚本开始时运行查询选择器，因此只会运行一次。因此，当用户单击按钮并且您向页面动态添加新 html 时，查询选择器将不会再次触发。

您可以像现在一样在脚本顶部初始化这些查询，但是您需要将它们的值重新分配给事件侦听器内的新查询，如下所示：

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll('.qty-item');
let cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');
//
let theform = document.querySelector(".theform");
let newitem = document.querySelector('.new-item');
let createBtn = document.getElementById("create");
let theItem = document.querySelector(".newStuff");

form.addEventListener("click",function(e){

let theHtml = `
 <div>
      <span class="cost">${newitem.value}</span>
    </div>
    <div class="qty">
      <label>QTY:</label><input placeholder="0" class="qty-item">
      </div>
      <div class="tot">
      <span><label>TOTAL</label> $0.0</span>
    </div>
`
//append your HTML to the correct target element then update your query inside the event listener

 textval = document.querySelectorAll('.qty-item');
 cal = document.getElementById("calc");
});

推荐阅读