$ajax запрос выполняется многократно?

Question

[Tizi]

Добовляю информацию при помощи ajax и столкнулся с проблемой неоднократного его выполнения.

ajax

$(document).on('click', '.add_slide', function () {
    //появление блока
    $('.add_slide_box').removeClass('hiden');
    //добавление
    $(document).on('click', '.add_slide_btn', function () {
      var name = $('.add_s_name').val();
      var text = $('.add_s_text').val();

      // name
      if (name != '') {
        $('.add_slide_box .errors p').remove();
      } else {
        $('.add_slide_box .errors').html('<p>Заполните поле "Название" !</p>');
        return;
      }
      // text
      if (text != '') {
        $('.add_slide_box .errors p').remove();
      } else {
        $('.add_slide_box .errors').html('<p>Заполните поле "Текст" !</p>');
        return;
      }

      var add_row = $('<div/>', {
        'class': 'row_info_box',
        'html': `
          <div class="box_wrapper">
            <i class="fas fa-file-image"></i>
            <p class="name_subscription">` + name + `</p>
          </div>
          <div class="box botton_applications">
            <i class="fas fa-angle-down" id="arrow_info_hiden"></i>
          </div>
          <div class="row_info_hiden hiden">
            <div class="row_input_hiden">
              <p>Название:</p>
              <input type="text" value="` + name + `">
            </div>
          </div>
          <div class="row_info_hiden hiden">
            <div class="row_input_hiden">
              <p>Текст:</p>
              <input type="text" value="` + name + `">
            </div>
          </div>`
      });

      $.ajax({
        type: 'POST',
        url: '../config/add_slide.php',
        data: {name: name, text: text},
        dataType: 'JSON',
        success: function (data) {
          $('.add_s_name').val('');
          $('.add_s_text').val('');
          $('.box_all_slides').append(add_row);
          $('.add_slide_box').addClass('hiden');
        }
      });
    });
    //отмена
    $('.cancellation').on('click', function () {
      $('.add_s_name').val('');
      $('.add_s_text').val('');
      $('.add_slide_box').addClass('hiden');
    });

  });

Перерыл много всего. Даже прочел информацию про делегированные события. но это мне не помогает. Такое чувство что на кнопку с классом .add_slide_btn вешаются обработчики по верх остальных и выполняются n * количество кликов по ней. если кто то знает как решить проблему подскажите куда рыть и что сделать ))

Answer 1

[eRKa]

Первый вариант, это вынести его из функции. В таком виде

$(document).on('click', '.add_slide_btn', function () ...

нет нужды его определять каждый раз при клике, т.к. даже если на момент объявления обработчика еще нет .add_slide_btn, то он всеравно отработает, даже если Вы этот селектор позже добавите.
Второй вариант on поменять на one, например
$('.add_slide_btn').one('click', function () ...
тогда это событие будет одноразовым.

Comments

[Tizi]

$('.add_slide_btn').one('click', function () ...
мне нравится больше )))))

Answer 2

[Rsa97]

Так вы сами при каждом нажатии на '.add_slide' добавляете ещё один обработчик нажатий на '.add_slide_btn'.

Comments

[Tizi]

А как мне это исправить что бы обработчик не вешался еще раз ??/ выносить из функции ???

[Rsa97]

Tizi, Да. У вас же обработчик вешается на весь документ, его достаточно один раз установить.

[Tizi]

Rsa97, Так смотрите )))) я нажимаю на кнопку с целью высветить окошко + вешаю обработчики на кнопки в этом окошке )))
.add_slide

кнопки в форме ))

я просто не понимаю как мне делать эти кнопки в форме доступными только в том случае если был клик на кнопку .add_slide

[Rsa97]

Tizi, Если кнопка "Добавить слайд" не нажата, то кнопок "Подтвердить" и "Отменить" просто нет. А значит и события от них не придут. Ну висит себе на document обработчик и пусть висит, он просто ничем не активируется.