Добавление в корзину через jQuery ajax

Question

я полный профан в js, пытаюсь сделать добавление товара в корзину с помощью ajax, но у меня событие срабатывает только на первую кнопку из списка, как исправить?

форма вывода товаров.

    <h2>Каталог товаров</h2>
<div><h2>Каталог</h2></div>
<div id="content_catalog">
    <?php foreach ($catalog as $item) : ?>
        <p><a href="index.php?c=Catalog&act=getOneGoods&catalog_id=<?= $item['id'] ?>"><?= $item['name'] ?></a>
            Цена: <?= $item['price'] ?>
            <input class="add_toBasket" catalog_id="<?= $item['id'] ?>" type="button" value="Добавить в корзину" /><hr>
        </p>
    <?php endforeach; ?>
</div>
<input id="show_more" count_show="2" count_add="3" type="button" value="Показать еще" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script src="/show_more.js" type="text/javascript"></script>
<script src="/add_toBasket.js" type="text/javascript"></script>

мой js скриптик

    $(document).ready(function(){

        $('.add_toBasket').click(function(e){
            var btn_more = $(this);
            var catalog_id = parseInt($(this).attr('catalog_id'));

            $.ajax({
                url: 'index.php?c=Basket&act=addToBasket', // куда отправляем
                type: "post", // метод передачи
                dataType: "json", // тип передачи данных
                data: { // что отправляем
                    "catalog_id":   catalog_id
                },
                // после получения ответа сервера
                success: function(data){
                    if(data.result == "success"){
                        btn_more.val('Добавлено, добавить еще?');
                    }else{
                        btn_more.val('Ошибка');
                    }
                }
            });
        });

    });

Answer 1

Попробуйте вот так:

<button class="addToCart" data-catalog-id="<?= $item['id'] ?>">Добавить в корзину</button>

$('.addToCart').click(function() {
  var button = $(this);
  var catalogId = $(this).data('catalog-id');
  
  $.ajax({
   ...
  }).done(function(data) {
    console.log(data); // ответ сервера
    self.text('Товар добавлен')
  }).fail(function(jqXHR, textStatus) {
    console.log('На сервере ошибка:', textStatus)
  });
});

Answer 2

Разобрался. Нужно было заменить вторую строку в js на

$("#content_catalog").on("click", ".add_toBasket", function (){

БЛОГ НА HUSL

Добавление в корзину через jQuery ajax

Ответы (2 шт):