时间戳

首页 > 解决方案 > 生成的按钮丢失功能

javascript - 生成的按钮丢失功能

问题描述

我正在尝试在不使用 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;
}

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

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

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

仅在加载页面时有效

标签： javascriptjqueryjsonajaxlocal-storage

解决方案

这个功能

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

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

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

推荐阅读