jQuery отправляет несколько запросов при многократном нажатии кнопки отправки

#javascript #php #jquery

Вопрос:

У меня есть код в проекте code-igniter. Когда я отправляю запрос на контроллер, он должен выполняться только один раз. Но когда я нажимаю несколько раз на кнопку отправки, он добавляет один и тот же продукт, который получен из jquery несколько раз. Например, я выбрал продукт «phone», который стоит 5 долларов. Когда я нажимаю кнопку отправки 3 раза, он добавляет 3 продукта «phone», и это стоит 15 долларов. Я пытался отключить кнопку «добавить в корзину», пытался скрыть ее при нажатии, но загрузка занимает так много времени. Вот мой код.

 $(document).ready(function(){
    var n = 0;
    $( "#add-to-cart" ).one( "click", function() {
        var index = $( "#add-to-cart" ).index( this );
        $( this ).css({
            borderStyle: "inset",
            cursor: "auto"
         });
    });
});

 <input id="add-to-cart" type="submit" value="ADD TO CART">

1. Хммм, но было бы бизнес-логикой захотеть отключить такое? Если да, может быть, мы могли бы использовать тип идентификатора продукта, чтобы сначала проверить ваш список, если он уже существует, и решить, следует ли добавлять или нет? Тогда вам не нужно было бы беспокоиться об отключении кнопки

2. Внутри обратного вызова кнопки отключите кнопку, добавив CSS-класс {pointer-event:none;}

3. Это нормальное поведение; вы можете проверить наличие необходимых условий

4. @ScottMarcus не могли бы вы, пожалуйста, объяснить это ясно?

5. Создайте класс CSS, подобный этому: .disable {pointer-events:none;} и в обработчике событий кнопки добавьте класс, подобный этому: this.classList.add("disable");

Ответ №1:

Вы пытались объявить управляющую переменную и проверить ее состояние при добавлении в корзину?

 var added = false;
$(document).ready(function()
{
    var n = 0;
    $( "#add-to-cart" ).one( "click", function()
    {
      if (!added)
      {
          var index = $( "#add-to-cart" ).index( this );
          $( this ).css({
              borderStyle: "inset",
              cursor: "auto"
          });
          added = true;
      }
    });
});