JS не видит элементы, созданные им ранее

162
19 декабря 2021, 00:00

Делаю корзину онлайн магазина. В правом верхнем углу у меня корзина, куда заносятся купленные товары. Сделала кнопку удаления для каждого товара в корзине, но js её не видит. Никаких ошибок не выдаёт

let userCart = [];
$('#basketButt').on('click', invis);
function invis() {
  $('#basketTable').slideToggle()
}
function render() {
  basketProducts = '';
  let summa = 0;
  for (el of userCart) {
    basketProducts += `<div class="basketProd">
      <div>
        <h4>${el.name}</h4>
        <p>Цена за штуку: ${el.price}$</p>
        <p>Количество: ${el.quantity}</p>
      </div>
      <div class="rightBasket">
        <h5>${el.price * el.quantity}$</h5>
        <button class="delButt" data-id="${el.id}">&times;</button>
      </div>
    </div>`
    summa+=el.price * el.quantity;
  }
  if (userCart.length != 0) {
    basketProducts += `
      <div><h3>Итого: ${summa}$</h3>
        <a href="order.php"><button id='buyButton'>Оформить заказ</button></a>
      </div>`
  }
  $('#basketProducts').html(basketProducts);
}
$('.buy').on('click', (Event) => {
  let productId = +Event.target.dataset['id'];
  let find = userCart.find (element => element.id === productId);
  if (!find) {
    userCart.push ({
      name: Event.target.dataset['name'],
      id: productId,
      photo: Event.target.dataset['photo'],
      price: +Event.target.dataset['price'],
      quantity: 1
    })
  } else {
    find.quantity++
  }
  render()
});
$('.delButt').on("click", (Event) => {
  console.log(Event.target);
  let productId = Event.target.dataset['id'];
  let find2 = userCart.find (element => element.id === productId);
  if (find2.quantity > 1) {
    find2.quantity--;
  } else {
    userCart.splice(userCart.indexOf(find2), 1);
  }
  render();
});
$('.buy').on('click', animation);
function animation() {
  if (!$(this).hasClass('pulse')) {
    pulse(this);
  } else {
    $(this).removeClass('pulse');
    pulse(this);
  }
}
function pulse(a) {
  $(a).addClass('pulse');
  setTimeout(() => {
    $(a).removeClass('pulse');
  }, 200);
}
READ ALSO
Использование тайлов Google Maps в leaflet js

Использование тайлов Google Maps в leaflet js

Мне нужно отображать геопозицию агента на карте в своей CRM системеМогу ли я использовать Google Maps тайлы в leaflet JS в коммерческом продукте? Я подключаю...

185
форма регистрации пользователя

форма регистрации пользователя

почему не читается свойство password при загрузке в правиле confirmPasswordRules?

105
как передать контекст html?

как передать контекст html?

мне надо передать контекст НА html В html: допустим надо передать: "< b>Hello world!< /b>" и на страничке это отображается ТОЧНО ТАК ЖЕ, те

194
вывести цифры из строки

вывести цифры из строки

есть строка в которой есть цифры строка1: nnnnnnn4012 результат должен быть: 4012

181