javascript - 更改一次类后，通过更改类使用按钮的多个功能失败

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 类的元素，您需要像这样使用事件委托(delegate)

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

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

Read more about event delegation here

下面是演示

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