Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/40: Рейтинг темы: голосов - 40, средняя оценка - 4.88
0 / 0 / 0
Регистрация: 20.11.2017
Сообщений: 107

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

24.06.2019, 15:00. Показов 7478. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Делаю подписку на пользователя. Есть кнопка
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
Но запрос выполняется при каждом клике на кнопку. Что я сделал не так? Есть ли альтернативы решения?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
24.06.2019, 15:00
Ответы с готовыми решениями:

Как описать событие нажатия на динамическую сформированную кнопку ajax?
Заранее извиняюсь если не совсем туда написал. Переместите плс в нужное место если я ошибся с размещением. Всем привет пытаюсь...

Событие нажатия на кнопку
Есть блок div, в котором выводятся данные из БД. Записи выводятся по одной. При нажатии на кнопку нужно изменить значение переменной...

Вызвать событие без нажатия на кнопку
Пишу скрипт на greasemonkey под файрфокс. Код на сайте &lt;tr id=&quot;id12&quot;&gt;&lt;td&gt;12&lt;/td&gt;&lt;td&gt;&lt;span...

4
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
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');
      }
    });
});
1
0 / 0 / 0
Регистрация: 20.11.2017
Сообщений: 107
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";
            
            
          }
        });
    }
 
});
По вашему мнению, так правильно?
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
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";
    }
  });
});
Но это дело вкуса, а о вкусах спорить не принято.
0
 Аватар для Algoritmer
159 / 98 / 25
Регистрация: 07.03.2013
Сообщений: 513
Записей в блоге: 1
29.06.2019, 21:50
Как вариант:
JavaScript
1
document.getElementById("subscribe").disabled = true;
И не придется менять id

Хотя, этот вариант не подойдет если по повторному нажатию предусмотрена Отписка
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.06.2019, 21:50
Помогаю со студенческими работами здесь

Как вызвать событие Onclick без нажатия на кнопку
суть в чем... имею конструкцию &lt;IMG SRC=http://img.example.ru/i/top2.gif WIDTH=27 HEIGHT=20 ALT name=g_up onclick='GoToNext()'&gt; пишу...

Событие нажатия на кнопку
Добрый вечер,подскажите пожалуйста,как правильно сотварить событие нажатия на определённую кнопку на клавиатуре? Вот что получилось у...

Событие нажатия на кнопку home
я хочу по нажатию на среднию кнопку там где нарисован домик вывести сообщение @Override public boolean onKeyDown(int keyCode,...

Как на событие нажатия на кнопку, открыть Word-ский файл
Надо открыть файл справки по работе с данной программой. &quot;Spr.doc&quot; Private Sub Кнопка1_Click() Как здесь написать? End...

По событию нажатия на кнопку вызвать функцию, в которой ждать нового нажатия на ту же самую кнопку
type TForm1 = class(TForm) Button1: TButton; procedure FormCreate(Sender: TObject); procedure Button1Click(Sender:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Инструменты 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru