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

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() { ... });

Read more about event delegation here

以下是演示

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

原因是当您更改按钮上的类时，它会丢失它的事件绑定。您可以使用event delegation保留事件绑定。