My goal is to create a webshop that doesn't rely on MySQL or any database, but instead reads items from JSON and stores them in LocalStorage. However, I've encountered an issue where the functionality of buttons gets lost after using AJAX to generate new "Add to Cart" buttons.
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;
}
Above, you'll find the AJAX script that loads items from a JSON file.
$(function(){
$(".addOneItem").click(function(){
console.log("lol");
})
})
Unfortunately, this button functionality only works once, right after the page is loaded.