Javascript 生成的按钮丢失功能

我试图在不使用MySQL或任何数据库的情况下构建一个webshop，只从JSON读取项目并将其存储在LocalStorage中。当页面刚刚加载时，生成的按钮将获得功能，但单击“添加到购物车”按钮后，该按钮也会生成，但使用AJAX时，该按钮将失去功能

    function load(){
    let listLoad = "";
    for (var i = 0; i < localStorage.length; i++) {
    var keyLS = JSON.parse(localStorage.getItem(localStorage.key(i)));
    listLoad += `<tr>
                 <span id="thisID" style="display:none">${keyLS.id}</span>
                 <td>${keyLS.name}</td>
                 <td>${keyLS.price}</td>
                 <td>${keyLS.quantity}</td>
                 <td><button type="submit"id="addOne" class="btn btn-success addOneItem">+</button></td>
                 <td><button class="btn btn-danger removeOneItem">-</button></td>
                 </tr>`


                }
     if(listLoad != ""){
         $("#cleanCart").css("display","inline");

     }
     document.getElementById('itsTboDy1').innerHTML = listLoad;
}

当加载页面时，此功能仅工作一次

$(function(){
 $(".addOneItem").click(function(){

     console.log("lol");
 })
})

在执行函数时，将侦听器添加到DOM中存在的所有

.addOneItem

元素。如果函数

load（）

在DOM中创建了新的

.addOneItem

按钮，那么它还需要注意将侦听器添加到这些按钮中。

---

另外，您没有发布HTML，但我假设旧按钮位于

#itsTboDy1

元素中，函数

load（）

覆盖它的内容，破坏旧元素和事件侦听器。

问题是您的按钮似乎是动态加载的。因此.click事件对动态元素不起作用。我建议尝试使用.on方法，它看起来像

$（函数（）{
$（document）.on（“click”，“.addOneItem”，function（））{
控制台日志（“lol”）；
});
});

你在哪里/如何调用函数

load（）

？不，在.addOneItem中没有按钮，它是空的，你能给我一个这个“事件”监听器的例子吗？如果需要，我可以发布所有的页面

$（“.addOneItem”）。单击（function（）{.console.log（“lol”）；}）

将事件监听器附加到这里。它的意思是：找到class.addOneItem的元素，如果DOM事件“click”发生在它们身上，则执行以下函数，即向控制台写入“lol”。我尝试了，没有工作，下一个asnwer人给出了，做了，无论如何这工作！Tyvm，数周来一直在寻找答案！现在，当我尝试向表中添加多行时，当我搜索隐藏在其中的文本时，它会像字符串一样添加值，如果我有第一个ID=1的项和一个ID=7的项，并尝试

console.log（$（this.parent（）.parent（）.parent（）.find（#thisID”）.text（））

它给我17个值，而不是从当前数据中只给我一个ID，我做错了什么？我没有完全理解你，但我想问题是你在for-in-for循环中为span循环相同的id，并且id是重复的。每个元素的id值都应该是唯一的。尝试使用循环索引i作为每个id的差异标记。我发现了一个问题，我的父级（）x100对其进行了一些修改，否则我确实修复了它

$(function(){
 $(".addOneItem").click(function(){

     console.log("lol");
 })
})