CODEWITHSUNDEEP
javascriptjquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Multiple functions with button by changing class fails after changing class once

I have a form and want to switch between the login and register easily. I have it set so that if the user clicks register the register form shows and that button changes to a button that will take them back to the login form if desired.

However when the user goes back to the login form, it won't let them get back to the register form again.

$('.register-form').hide();

$('a.register').click(function() {
  $('.login-form').hide();
  $('.register-form').show();
  
  $('button').text('Register');
  $('a.register').removeClass('register').addClass('login-return').text('Back to Login');
});

$('a.login-return').click(function() {
  $('.register-form').hide();
  $('.login-form').show();
  
  $('button').text('Login');
  $('a.login-return').removeClass('login-return').addClass('register').text('Register');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div class="login-form">
    <input type="email" name="email" placeholder="email"><br/>
    <input type="password" name="password" placeholder="password">
  </div>
  <div class="register-form">
    <input type="text" name="register-name" placeholder="name"><br/>
    <input type="email" name="register-email" placeholder="email"><br/>
    <input type="password" name="register-password" placeholder="password">
  </div>
  <button type="submit">Login</button>
  <a href="#" class="register">Register</a>
</form>

Upvotes: 1

Views: 33

Answers (2)

Dhiraj
Dhiraj

Reputation: 33618

Since there is not element with .login-return class at the time of attaching the events you need to use event delegation like this 

$('form').on('click', 'a.register',function() { ... });

$('form').on('click', 'a.login-return',function() { ... });

Read more about event delegation here

Below is a demo

$('.register-form').hide();

$('form').on('click', 'a.register', function() {
  $('.login-form').hide();
  $('.register-form').show();

  $('button').text('Register');
  $('a.register').removeClass('register').addClass('login-return').text('Back to Login');
});

$('form').on('click', 'a.login-return', function() {
  $('.register-form').hide();
  $('.login-form').show();

  $('button').text('Login');
  $('a.login-return').removeClass('login-return').addClass('register').text('Register');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div class="login-form">
    <input type="email" name="email" placeholder="email">
    <br/>
    <input type="password" name="password" placeholder="password">
  </div>
  <div class="register-form">
    <input type="text" name="register-name" placeholder="name">
    <br/>
    <input type="email" name="register-email" placeholder="email">
    <br/>
    <input type="password" name="register-password" placeholder="password">
  </div>
  <button type="submit">Login</button>
  <a href="#" class="register">Register</a>
</form>

Upvotes: 5

Daniel Waghorn
Daniel Waghorn

Reputation: 2985

The reason is that when you change the class on the button it loses it's event bindings. You can retain the event bindings by using event delegation.

Upvotes: 1

Related Questions