更改类一次后,通过更改类的按钮的多个功能失败

Question

我有一个表单,想要在登录和轻松注册之间切换.我已将其设置为如果用户单击注册,则显示注册表单,并且该按钮将更改为按钮,如果需要,该按钮将返回到登录表单.

但是,当用户返回登录表单时,它不会让他们再次返回到注册表单.

$('.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>

Answer 1

由于.login-return在附加事件时没有类的元素,因此您需要使用事件委托

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

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

阅读更多关于活动授权的信息

以下是演示

$('.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>