ajax function not working. How to be?

Question

JavaScript

In Yii, I wrote the following function for the button:

$('.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('Ошибка');
                }
            });
        });

Which cancels the transition by the link, and displays the id value in the console.
The button itself:

<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>

But after clicking, it still follows the link to another page.

Answer 1

Correct the class name. In JS you have "add_to_cart", and on the button "add-to-cart".

Answer 2

Doesn't it bother you that there is no alert and there is nothing in the console? Watch how you separate words by naming a class and passing it to the jq selector.

Answer 3

Everything should work https://jsfiddle.net/a49f3nzu/ see console for errors.
Or, if your code is executed before a link appears on the page, try wrapping it in $(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('Ошибка');
                }
            });
        });
});