Регистрация и Авторизация через один button

@karim_ · Регистрация: 16.09.2014

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

Если нажимаем на <span id="hauth">Authorization</span>, то id button-а меняется, тем самым должно меняться и действие при клике на button, но оно остается прежним

HTML5

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
</head>
<style>
span{
    cursor: pointer;
}
.active{
    color:red;
}
</style>
<body>
     <h1><span class="active"id="hreg">Registration</span> | <span id="hauth">Authorization</span></h1>
    <button id="reg">RegIn</button>
    <script  type="text/javascript">
        $("#hauth").click(function(){
          $(this).addClass('active');
          $("#hreg").removeClass('active');
          $("#reg").text('Log in');
          $("#reg").attr('id','log');
          
          
            });
        $("#hreg").click(function(){
          $(this).addClass('active');
          $("#hauth").removeClass('active');
          $("#log").text('Reg in');
          $("#log").attr('id','reg');
          //ajax запрос для регистрации
        });
        $('#reg').click(function(){
            alert('registration');
             //ajax запрос для регистрации
            });
            
        $('#log').click(function(){
            alert('autharization');
            //ajax запрос для авторизации
        });
    </script>
</body>
</html>

Возможно ли это реализовать, если да, то как? если нет, то почему?

@rodigy · 04.09.2017, 01:23

Попробуйте заменить ф-цию click на on

Не по теме:

А вообще странная реализация, лучше сделать всю обработку на событие submit

@karim_ · 04.09.2017, 20:16 **[ТС]**

Не помогло, событие submit вешается на форму($('form').submit({...})), а мне нужно реализовать регистрацию и авторизацию через одну кнопку, так что submit мне не помощник

@rodigy · 04.09.2017, 22:00

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

Не помогло

Javascript

$("#hauth").click(function(){
  $("#reg").text('Log in');
  $("#reg").attr('id','log');
  $(this).addClass('active');
  $("#hreg").removeClass('active');
});
$("#hreg").click(function(){
  $(this).addClass('active');
  $("#hauth").removeClass('active');
  $("#log").text('Reg in');
  $("#log").attr('id','reg');
});
$('body').on('click', '#reg', function(){
  alert('registration');
  //ajax запрос для регистрации
});
 
$('body').on('click', '#log', function(){
  alert('autharization');
  //ajax запрос для авторизации
});

Добавлено через 3 минуты

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

так что submit мне не помощник

С таким же успехом можно менять action у формы(если она одна) вместо ид кнопок, или менять атрибут form для button и отрабатывать форму по сабмиту

@j2FunOnly · 04.09.2017, 22:02

karim_, все что вводит пользователь удобно обрабатывать с помощью форм - это их прямая задача. Зря отказываетесь, придумываете себе проблемы...

@karim_ · 04.09.2017, 22:09 **[ТС]**

тру работает, спасибо)

Добавлено через 2 минуты
В чем проблема была в моем коде, есть же этому разумное объяснение

@j2FunOnly · 04.09.2017, 22:27

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

есть же этому разумное объяснение

Есть - и это элементарно: обработчики событий навешиваются только на элементы, которые присутствуют в DOM в момент обработки скрипта, то есть у вас #reg есть, но #log еще нет. Способ описанный rodigy, навешивает обработчик клика на весь body, но в котором проверяется явная цель клика - это называется делегированием. Почему для вас это загадка? Потому что вы не знаете основ. Всё просто.

rodigy, весь код должен быть на форуме.

@rodigy · 04.09.2017, 23:32

Не по теме:

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

весь код должен быть на форуме

ок, но ссылку то зачем удалять?(это к модератору вопрос)

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 574
	04.09.2017, 01:23	2
	Попробуйте заменить ф-цию click на on Не по теме: А вообще странная реализация, лучше сделать всю обработку на событие submit 0

@karim_ 0 / 0 / 2 Регистрация: 16.09.2014 Сообщений: 68
	04.09.2017, 20:16 [ТС]	3
	Не помогло, событие submit вешается на форму($('form').submit({...})), а мне нужно реализовать регистрацию и авторизацию через одну кнопку, так что submit мне не помощник 0

@j2FunOnly the hardway first 2461 / 1836 / 906 Регистрация: 05.06.2015 Сообщений: 3,603
	04.09.2017, 22:02	5
	karim_, все что вводит пользователь удобно обрабатывать с помощью форм - это их прямая задача. Зря отказываетесь, придумываете себе проблемы... 0

@karim_ 0 / 0 / 2 Регистрация: 16.09.2014 Сообщений: 68
	04.09.2017, 22:09 [ТС]	6
	тру работает, спасибо) Добавлено через 2 минуты В чем проблема была в моем коде, есть же этому разумное объяснение 0

@j2FunOnly the hardway first 2461 / 1836 / 906 Регистрация: 05.06.2015 Сообщений: 3,603
	04.09.2017, 22:27	7
	Сообщение от karim_ есть же этому разумное объяснение Есть - и это элементарно: обработчики событий навешиваются только на элементы, которые присутствуют в DOM в момент обработки скрипта, то есть у вас #reg есть, но #log еще нет. Способ описанный rodigy, навешивает обработчик клика на весь body, но в котором проверяется явная цель клика - это называется делегированием. Почему для вас это загадка? Потому что вы не знаете основ. Всё просто. rodigy, весь код должен быть на форуме. 1

@rodigy
	04.09.2017, 23:32 Регистрация и Авторизация через один button #8
	Не по теме: Сообщение от j2FunOnly весь код должен быть на форуме ок, но ссылку то зачем удалять?(это к модератору вопрос) 0

Регистрация и Авторизация через один button

Решение