1

я полный профан в 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('Ошибка');
                    }
                }
            });
        });

    });

2 ответа 2

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)
  });
});
3
  • да, сработало, спасибо. А в чем было дело? А еще, как мне теперь сделать, чтобы при успехе кнопка меняла свое значение, как это у меня и было?
    – volnistii
    1 апр 2021 в 21:19
  • В чем было дело не уверен. Но JS обновил 1 апр 2021 в 22:00
  • Спасибо, а вы не знаете, как сделать, чтобы обработчик прикрепляется еще к тем элементам, которые были добавлены позже?Например, у меня есть кнопка "Показать еще", я ее нажимаю, у меня выводятся еще товары из каталога, но я их не могу добавить корзину, т.к. как я понял клик-обработчик вешается только на те элементы, которые существуют в начале.
    – volnistii
    2 апр 2021 в 13:49
1

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

$("#content_catalog").on("click", ".add_toBasket", function (){
1
  • Пожалуйста, используйте косые кавычки для офомления кода.
    – Pak Uula
    2 апр 2021 в 14:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.