Событие нажатия на кнопку с ajax

@Doma_y_kota · Регистрация: 20.11.2017

Студворк — интернет-сервис помощи студентам

Делаю подписку на пользователя. Есть кнопка

HTML5
1
<button id="subscribe" class="subscribe_button">Подписаться</button>

Повесил код js с ajax

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('#subscribe').on('click', function() {
    $.ajax({
      type: 'POST',
      url: 'subscribe.php',
      data: 'whom=<?= $_GET["id"] ?>',
      success: function(data){
        document.getElementById('subscribe').id = "subscribed";
      }
    });
 
});

Меняю айди кнопки для того, чтобы запрос не выполнялся снова если кнопка была нажата, ведь обработчик весит на #subscribe
Но запрос выполняется при каждом клике на кнопку. Что я сделал не так? Есть ли альтернативы решения?

@j2FunOnly · 24.06.2019, 15:22

Сообщение от Doma_y_kota

Меняю айди кнопки для того, чтобы запрос не выполнялся снова если кнопка была нажата, ведь обработчик весит на #subscribe

Это не так. Обработчик висит на элементе DOM, вы можете потом менять атрибуты, добавлять классы и пр., но пока объект существует, будет обрабатываться и событие.

Это работает и в обратную сторону: если в момент выполнения скрипта, который назначает обработчики событий элементов не будет в документе, то и после появления / добавления их (элементов, попадающих под селектор), события обрабатываться не будут. Подробнее тут: https://api.jquery.com/on/

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().

В вашем случае достаточно удалить обработчик клика:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('#subscribe').on('click', function() {
    var $this = $(this);
    $.ajax({
      type: 'POST',
      url: 'subscribe.php',
      data: 'whom=<?= $_GET["id"] ?>',
      success: function(data){
        $this.off('click');
      }
    });
});

@Doma_y_kota · 24.06.2019, 15:26 **[ТС]**

Сообщение от j2FunOnly

В вашем случае достаточно удалить обработчик клика:

Спасибо, я уже решил другим способом:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var s;
s = 0;
$('#subscribe').on('click', function() {
    if (s == 0) {
        $.ajax({
          type: 'POST',
          url: 'subscribe.php',
          data: 'whom=<?= $_GET["id"] ?>',
          success: function(data) {
            s = 1;
            document.getElementById('subscribe').text = "Вы подписались";
            document.getElementById('subscribe').id = "subscribed";
            
            
          }
        });
    }
 
});

По вашему мнению, так правильно?

@j2FunOnly · 24.06.2019, 15:37

Сообщение от Doma_y_kota

так правильно?

На ваше усмотрение. Так-то распространённая практика и называется Guard Expression, когда поведение зависит от состояния (внешнего или внутреннего).

Только для улучшения читаемости, т. к. здесь только один if, можно сделать так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var s;
s = 0;
$('#subscribe').on('click', function() {
  if (s != 0) return;
 
  $.ajax({
    type: 'POST',
    url: 'subscribe.php',
    data: 'whom=<?= $_GET["id"] ?>',
    success: function(data) {
      s = 1;
      document.getElementById('subscribe').text = "Вы подписались";
      document.getElementById('subscribe').id = "subscribed";
    }
  });
});

Но это дело вкуса, а о вкусах спорить не принято.

@Algoritmer · 29.06.2019, 21:50

Как вариант:

JavaScript
1
document.getElementById("subscribe").disabled = true;

И не придется менять id

Хотя, этот вариант не подойдет если по повторному нажатию предусмотрена Отписка

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .