Не работает функция ajax. Как быть?

Question

[Александр Горкин]

В Yii для кнопки написал вот такую функцию:

$('.add_to_cart').on('click', function (e) {
            e.preventDefault();
            var id = $(this).data('id');
            $.ajax({
                url: '/cart/add',
                data: {id: id},
                type: 'GET',
                success: function(res){
                    if (!res) aler('ошибка!');
                    console.log(res);
                    //showCart(res);
                },
                error: function(){
                    alert('Ошибка');
                }
            });
        });

Которая отменяет переход по ссылке, а в консоли выводит значение id.
Сама кнопка:

<a class="add-to-cart"  data-id="<?= $product->id?>"   href="<?= \yii\helpers\Url::to(['/cart/add', 'id' => $product->id])?>"><button  class="btn btn-choose">Выбрать</button></a>

Но после нажатия она все равно проходит по ссылке на другую страницу.

Comments

[Модератор]

Александр Горкин дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Владислав Грудин]

Поправьте название класса. В JS у Вас "add_to_cart", а на кнопке "add-to-cart".

Comments

[Александр Горкин]

Спасибо. Совсем к ночи приуныл. Невнимательность.

Answer 2

[Виктор Янышев]

Тебя не смущает что алерта нету и в консоли ничего нету? Смотри на то как отделяешь слова именуя класс и передовая его в селектор jq.

Answer 3

[Владимир Проскурин]

Все должно работать https://jsfiddle.net/a49f3nzu/ смотрите консоль на наличие ошибок.
Или же, ваш код выполняется до того, как на странице появляется ссылка, попробуйте завернуть в $(function() { })

$(function() {
$('.add_to_cart').on('click', function (e) {
            e.preventDefault();
            var id = $(this).data('id');
            $.ajax({
                url: '/cart/add',
                data: {id: id},
                type: 'GET',
                success: function(res){
                    if (!res) aler('ошибка!');
                    console.log(res);
                    //showCart(res);
                },
                error: function(){
                    alert('Ошибка');
                }
            });
        });
});