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

Question

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>

The second click event wont be registered because at that time there is no element with class .login-return — 0x_Anakin
– 0x_Anakin, Commented Jul 17, 2015 at 14:15

Dhiraj · Accepted Answer · 2015-07-17 14:19:50Z

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>

Daniel Waghorn · Accepted Answer · 2015-07-17 14:14:47Z

1

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.

answered Jul 17, 2015 at 14:14

Daniel Waghorn

2,9852 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related