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

Question

[ImagineWorld]

Есть форма для включения смс уведомлений. Есть кнопка "Включить" с классом '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("[phone]");
              $('.status').find('.not-status').html('Выключено');
            }
  
        });        
      });
      })

getData - это AJAX запрос. Там по нажатию на Включить, после запроса кнопка меняется на Выключить, без перезагрузки, само значение меняется и появляется Выключить, так же меняется класс на off, но если я нажму потом на Выключить, то повторный клик с запросом не отрабатывает. Как это можно поправить?

Answer 1

[Алексей Царапкин]

Попробуйте вместо
$('.on').click(function(e){});
использовать
$(".on").on("click", function(e){});
или
$(document).on("click", ".on", function(e){});

Answer 2

[Roman Khegay]

Я бы решил вот так:

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

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

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