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

  <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

您應該將第二個選擇器更改為與第一個選擇器相同。 因為使用.html（）您正在更改nex容器div的內容，但是該div仍然存在。 如果您使用：

 $('#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 2

一切似乎都還可以，但是您沒有任何帶有'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>');
      });