Execute Ajax request Only Once

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>

Button.remove should work only once, how can i make this happen? It spawns multiple times. For example if click that addToCart button 2 times, this remove is spawning to times in a row, i need it so that it will just once. My problem is that i have products and i add them via this button $('#addToCart').click(function () using ajax, and i have cart that is storing products. This button $('.remove').click(function () should be added to each product, but this button is in #addToCart button, and when multiple products is added, $('remove") button is working multiple times too.Sorry for bad english

Answer 1

You can simply use jQuery one to call your ajax request once per element.

Run snippet below to see it work only once.

 $(".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>

Answer 2

You can use on and off to avoid a double click.

 $(".remove").on("click", function() { $(".remove").off("click"); console.log("clicked"); });

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

Answer 3

You could use off to remove the event listener after your onclick event

$('.remove').click(
function () {$('.remove').off("click")
//...