javascript - JQuery，不同点击时更改按钮

Question

我正在设置一个注册表单，并在按“下一步”后使用 JQuery 更改按钮类型。

这目前有效，但我希望按钮在按下“后退”的情况下恢复。

我的代码如下。

      $(function () {
          $('#next').on('click', function () {
              $('.reg-page-1').animate({'left': '-105%'});
              $('.reg-page-2').animate({'left': '0px'});

              $('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');

          });

          $('#back').on('click', function () {
              $('.reg-page-1').animate({'left': '10%'});
              $('.reg-page-2').animate({'left': '115%'});

              $('btn-submit-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
          });
       });

相关 HTML block 如下。

  <div class="btn-toolbar" style="width:100%;">
    <div class="btn-back-1" style="width:49%;float:left;">
        <button id="back" type="button" class="btn btn-default btn-lg btn-block" aria-expanded="false">Back </button>
    </div>
    <div class="btn-next-1" style="width:49%;float:right;">
        <button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>
    </div>
  </div>

更新

我已将 JS 更新为以下内容

  $(function () {
      $('#next').on('click', function () {
          $('.reg-page-1').animate({'left': '-105%'});
          $('.reg-page-2').animate({'left': '0px'});
          $('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');

      });

      $('#back').on('click', function () {
                $('.reg-page-1').animate({'left': '10%'});
                $('.reg-page-2').animate({'left': '115%'});
                $('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
            });  
});

但是，我现在发现自己遇到了一个奇怪的问题。

该按钮确实有效，它改变了我的应用程序的状态。

但是一旦单击“后退”，按钮就会切换回“下一步”。 “下一步”按钮似乎不起作用或再次切换到“提交”按钮。

换句话说，这些功能似乎只能运行一次。

Answer 1

一切似乎都很好，但你没有任何带有“btn-submit-1”的选择器，经过更正后，后退按钮的代码必须如下所示:

$('#back').on('click', function () {
          $('.reg-page-1').animate({'left': '10%'});
          $('.reg-page-2').animate({'left': '115%'});            
          $('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
      });