Сгенерированная кнопка теряет функциональность

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");
 })
})

добавляет слушателей ко всем элементам .addOneItem, присутствующим в DOM , когда функция выполняется . Если функция load() создает новые кнопки .addOneItem для DOM, она также должна позаботиться о добавлении слушателей к ним. Кроме того, вы не публиковали HTML, но я предполагаю, что старая кнопка была внутри элемента #itsTboDy1, а функция load() перезаписывает его содержимое, уничтожая старые элементы и прослушиватели событий вместе с ними.

Answer 2

Проблема в том, что ваша кнопка загружается динамически.Таким образом, событие .click не будет работать для динамических элементов.Я предлагаю попробовать использовать метод .on, который будет выглядеть примерно так:

$(function(){
 $(document).on("click",".addOneItem",function(){

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