Клики по динамически созданным кнопкам в форме ajax?

Question

[Fedyaaaa]

У меня есть форма товара, которая в зависимости от наличия в корзине добавляет поля. Если нет в корзине, то "Добавить в корзину", иначе "Удалить из корзины" (работает на php)

Из-за этого я столкнулся с проблемой. Если несколько раз нажимать кнопки "Добавить" -- "Удалить", то ajax-запрос перестает действовать, как и сам js, наверное.

Кто делал подобный функционал, подскажите, пожалуйста, как его подкорректировать, чтобы он работал правильно?

HTML

<form class="form-submit">
<div class="category__product">
<a href="#">
<img src="assets/img/noimg.jpg" alt="image">
</a>
<div class="product__main">
<h3 class="product__heading"><?= $row['name']; ?></h3>
<p class="product__price"><?= $row['price']; ?>₽</p>
</div>
<div class="product__group-information">
<input type="number" min="1" class="product__count" value="1" name="product_count">
<div class="product__group-btn">
<button type="button" name="product__add" class="product__add btn_primary">Добавить в корзину</button>
</div>
</div>
<?php else: ?>
<button type="button" class="product__delete btn_alt">Удалить</button>
<?php endif; ?>
</div>
</div>
</form>

JS

card.forEach((card) => {
  let block = document.createElement("div");
  block.innerHTML = `
  <div class="product__group-details">
<div class="product__amount-block">
<div>
  <button type="button" class="decrease_amount">−</button>
</div>
<input type="number" min="1" class="product__count" value="1" name="product_count">
<div>
  <button type="button" class="increase_amount">+</button>
</div>
</div>
<button type="button" class="product__delete btn_alt">Убрать</button>
</div>`;
  let blockAlt = document.createElement("div");
  blockAlt.innerHTML = `
  <div class="product__group-information">
<input type="number" min="1" class="product__count" value="1" name="product_count">
<div class="product__group-btn">
<button type="button" name="product__add" class="product__add btn_primary">Добавить в корзину</button>
</div>
</div>
  `;
  const addCardBtn = card.querySelector(".product__add");
  addCardBtn.addEventListener("click", () => {
    $(".product__add").on("click", function () {
      let form = $(this).closest(".form-submit");
      let name = form.find(".product__name").val();
      let id = form.find(".product__id").val();
      let price = form.find(".product__price-alt").val();
      let amount = form.find(".product__count").val();

      $.ajax({
        url: "ajax/basket/send.php",
        type: "POST",
        cache: false,
        data: { amount: amount, name: name, id: id, price: price },
        dataType: "html",
      });
    });

    card.querySelector(".product__group-information").style.display = "none";
    card.querySelector(".product__group").append(block);

    const deleteCardBtn = card.querySelector(".product__delete");

    $(".product__delete").on("click", function () {
      let form = $(this).closest(".form-submit");
      let id = form.find(".product__id").val();

      $.ajax({
        url: "/ajax/basket/delete.php",
        type: "POST",
        cache: false,
        data: { id: id },
        dataType: "html",
      });
      card.querySelector(".product__group-details").style.display = "none";
      card.querySelector(".product__group").append(blockAlt);
    });
  });
});

Answer 1

[ThunderCat]

делегирование.

+$(".form-submit").on("click", ".product__add", function () {
-$(".product__add").on("click", function () {