Javascript 尝试对用户创建的输入值求和

我有一个函数，它生成表中所有“priceInput”类的输入。 然后是一个对该类的值求和的函数

我已经测试了求和公式，我知道如果“priceInput”类元素在我的html中，它就可以工作，但当我让用户创建它们时就不行了。请帮忙

 function newItem() {
    var tab;
    tab = document.createElement("div");
    tab.innerHTML = `
        <table><tbody>
            <tr>
                <td class="descriptionLabel top priceContainer">Price: $</td>
                <td class="descriptionPrice"><input type="number" class="priceInput"></td>
            </tr>
        </tbody></table>`;
    document.getElementById("addtable").appendChild(tab);
  }

$(".priceInput").on("keyup", function () {
      let sum = 0;
      $(".priceInput").each(function () {
        sum += $(this).val() / 1;
      });
      $("#specialTotal").text(sum);
    });


<div class="buttonContainer">
      <button class="newItemButton" onclick="newItem()">Add New item</button>
</div>

<div id="addtable"></div>

<div class="total" id="specialTotal"></div>

函数newItem（）{
var选项卡；
tab=document.createElement（“div”）；
tab.innerHTML=`
价格：$
`;
document.getElementById（“addtable”）.appendChild（选项卡）；
}
$（“.priceInput”）。在（“键控”，函数（）{
设和=0；
$（“.priceInput”）。每个（函数（）{
sum+=$（this）.val（）/1；
});
元（“#特别总额”）。文本（总和）；
});
添加新项目

我猜发生这种情况是因为一个常见的问题。我认为正在发生的是，当运行

$（“.priceInput”）.on（“keyup”…

时，它将事件侦听器附加到执行此命令时存在的

.priceInput

元素

因此，任何使用

.priceInput

动态创建的元素都没有附加事件侦听器。有两种方法可以解决此问题：

每次将事件侦听器附加到您创建的任何新元素

将侦听器附加到整个文档，并验证

事件.target

是否是您希望的元素。如果它是具有

.priceTable

的元素，则进行求和

小提琴演奏方法1：

---

Fiddle application method 2：

如果我将侦听器附加到整个文档中，您能给我一个if语句的示例吗？@Haydn我正在尝试让它工作，因为现在我链接了一个JS Fiddle application method 1，它正在正常工作be@Haydn这就是if条件的外观ike:

if（$（event.target）.hasClass（'priceInput'））

我已经更新了答案。如果答案对你有帮助，你应该选择它作为正确答案，以帮助可能有相同问题的其他人：）刚刚做了！再次感谢，我也将尝试第二种方法