javascript - 仅执行一次 Ajax 请求

Question

$('#addToCart').click(function () {
                let csrf = $("input[name=csrfmiddlewaretoken]").val();
                let trTable = $(this).parents('div')[1];
                let customPrice = $($(trTable).children('div')[0]).find('#customPrice').val();
                let quantity = $($(trTable).children('div')[1]).find('#quantity').val();
                let productID = $('#addToCart').attr('data-product-id');
                $.ajax({
                    url: "{% url 'cart:cart_add' %}",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        'csrfmiddlewaretoken': csrf,
                        productID: productID,
                        quantity: quantity,
                        customPrice: customPrice
                    },
                    success: function (data) {
                        $('#exampleModal').modal('hide');
                        let cart = $('#cart').children('tr');
                        let id = null;
                        jTotal = $('#total')
                        let trTable = $(this).parents('td');
                        let quantityField = '';
                        for (let i = 0; i < cart.length; i++) {
                            let tds = $(cart[i]).children('td')
                            let td = $(cart[i]).children('td')[tds.length - 1];
                            let ID = $(td).children('button').attr('data-product-id');
                            if (ID == data.id) {
                                quantityField = $(cart[i]).children('td')[1];
                                totalPriceField = $(cart[i]).children('td')[2];
                                id = ID;
                            }
                        }
                        if (data.id == id) {
                            $(quantityField).text(data.quantity);
                            $(totalPriceField).text(data.total);
                            jTotal.find('.total').find('.num').html(data.totalPrice);
                        } else {
                            $('#cart').append(
                                `<tr>
                                <td class="jsgrid-cell productName">${data.name}</td>
                                <td class="jsgrid-cell productQuantity" >${data.quantity}</td>
                                <td class="jsgrid-cell totalPrice">${data.total}</td>
                                <td class="productID"">
                                    <button type="button"  data-product-id="${data.id}" class="btn btn-sm btn-danger remove mgt"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                            `);
                            jTotal.find('.total').find('.num').html(data.totalPrice);
                        }

                        $('.remove').one("click", function() {
                            const result = confirm('Вы точно хотите удалить этот товар из корзины?');
                            if (result) {
                                let csrf = $("input[name=csrfmiddlewaretoken]").val();
                                let trTable = $(this).parents('td');
                                $.ajax({
                                    url: "{% url "cart:cart_remove" %}",
                                    method: 'POST',
                                    dataType: 'json',
                                    data: {
                                        'csrfmiddlewaretoken': csrf,
                                        productID: data.id,
                                    },
                                    success: function (data) {
                                        sellPrice = $(trTable.parents('tr').find('.totalPrice')).html();
                                        absoluteTotalPrice = jTotal.find('.total').find('.num').html();
                                        totalCost = Number(absoluteTotalPrice) - Number(sellPrice);
                                        jTotal.find('.total').find('.num').html(totalCost);
                                        trTable.parents('tr').remove();
                                    }
                                });
                            }
                        });
                    }
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

按钮 .remove 应该只能工作一次，我怎样才能做到这一点？它会产生多次。例如，如果单击 addToCart 按钮两次，此删除会连续生成多次，我需要它，这样它只会出现一次。 我的问题是我有产品，我通过此按钮 $('#addToCart').click(function () 使用 ajax 添加它们，并且我有存储产品的购物车。此按钮 $('.remove').click (function () 应该添加到每个产品中，但是这个按钮位于 #addToCart 按钮中，并且当添加多个产品时，$('remove") 按钮也会多次工作。抱歉英语不好

Answer 1

您可以简单地使用 jQuery one每个元素调用一次 ajax 请求。

运行下面的代码片段，看看它只工作一次。

$(".click-me").one("click", function() {
  console.log("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click-me">Remove</button>