Событие нажатия на кнопку с 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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

Опции темы