javascript - 生成的按钮失去功能

Question

我正在尝试构建一个网上商店，而不使用 MySQL 或任何数据库，仅从 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;
}

在顶部，我有 AJAX，可以从 JSON 文件加载项目。

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

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

这只在页面加载时有效一次

Answer 1

这个函数

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

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

执行函数时，将监听器添加到 DOM 中存在的所有 .addOneItem 元素。如果函数 load() 向 DOM 创建新的 .addOneItem 按钮，它还需要负责向它们添加监听器。另外，您没有发布 HTML，但我假设旧按钮位于 #itsTboDy1 元素内，并且函数 load() 会覆盖它的内容，从而破坏旧元素和事件监听器。