@ImagineWorld

Как на Jquery можно сделать кнопку «Включить/Выключить»?

Есть форма для включения смс уведомлений. Есть кнопка "Включить" с классом 'on', по нажатию на неё отправляется AJAX запрос, и если ответ положительный, то у кнопки класс должен меняться на 'off', и вешаться другой обработчик клика, уже для класса 'off' с другим AJAX запросом, для выключения, соответственно. Я сделал это так:

$('.on').click(function(e){
          e.preventDefault();

          getData('', 'POST', $('.sms-not-form').serialize()).then(result=>{
            let on=result;
  
                if (on.code=='0') {
              $('.change-password').find('input').remove();
                getData('', 'POST').then(result=>{
                  let userinfo=result.data.uinfo;
                  if(result.code=='0') {
                  $('.change-password').append('<input name="mphone" readonly value="'+userinfo.sms.phone+'">');
                  }
                })
              $('.status').find('.sms-not-button-on').attr('value','Выключить');
              $('.status').find('.not-status').html('Включено');
              $('.status').find('.sms-not-button-on').attr('class','sms-not-button-off');
            } 

        });
        $('.off').click(function(e){
          e.preventDefault();
  
          getData('', 'POST', $('.sms-not-form').serialize()).then(result=>{
           let off=result;
  
            if (off.code=='0') {
              $('.status').find('.sms-not-button-off').attr('class','sms-not-button-on');
              $('.status').find('.sms-not-button-on').attr('value','Включить');
              $('.change-password').find('input').mask("+38 (072)-999-99-99");
              $('.status').find('.not-status').html('Выключено');
            }
  
        });        
      });
      })


getData - это AJAX запрос. Там по нажатию на Включить, после запроса кнопка меняется на Выключить, без перезагрузки, само значение меняется и появляется Выключить, так же меняется класс на off, но если я нажму потом на Выключить, то повторный клик с запросом не отрабатывает. Как это можно поправить?
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ответы на вопрос 2
Dreamka
@Dreamka
Web-разработчик.
Попробуйте вместо
$('.on').click(function(e){});
использовать
$(".on").on("click", function(e){});
или
$(document).on("click", ".on", function(e){});
Ответ написан
khegay
@khegay
Founder, NNDB Kazakhstan
Я бы решил вот так:

$(function() {
    $('.on').click(function(e) {
        e.preventDefault();
        
        if ($(this).hasClass('off')) {
            $(this).removeClass('off');
            return // тут запрос на отключение
        }

        $(this).addClass('off');

        return // тут запрос на подключение
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы