Javascript JQuery，在不同的点击中更改按钮

我正在设置一个注册表，并在按下“下一步”后使用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>');
          });
       });

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

$（函数（）{
$（'#next'）。在（'单击'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'-105%}）；
$（'.reg-page-2'）。动画（{'left'：'0px'}）；
$（'.btn-next-1'）.html（'Submit！'）；
});
$（'#back'）。在（'click'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'10%}）；
$（'.reg-page-2'）。动画（{'left'：'115%}）；
$（'btn-submit-1'）.html（'Next'）；
});
});

下面是讨论中的HTML块

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

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

$（函数（）{
$（'#next'）。在（'单击'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'-105%}）；
$（'.reg-page-2'）。动画（{'left'：'0px'}）；
$（'.btn-next-1'）.html（'Submit！'）；
});
$（'#back'）。在（'click'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'10%}）；
$（'.reg-page-2'）。动画（{'left'：'115%}）；
$（'.btn-next-1'）.html（'next'）；
});  
});

然而，我现在发现自己陷入了一个奇怪的问题

这个按钮确实起作用了，它改变了我的应用程序的状态

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

---

换句话说，这些函数似乎每个只能工作一次。

您应该将第二个选择器更改为与第一个选择器相同。 因为使用.html（）可以更改nex的container 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>');
      });

$（'#back'）。在（'click'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'10%}）；
$（'.reg-page-2'）。动画（{'left'：'115%}）；
$（'.btn-next-1'）.html（'next'）；
});

---

它将返回到原始状态。

一切似乎都正常，但您没有任何带有“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>');
      });

$（'#back'）。在（'click'，函数（）{
$（'.reg-page-1'）。动画（{'left'：'10%}）；
$（'.reg-page-2'）。动画（{'left'：'115%}）；
$（'.btn-next-1'）.html（'next'）；
});

btn-submit-1是什么？我认为你的代码应该可以工作。我看到您的

btn-submit-1

选择器在

#back

单击手柄中缺少一个

，我进行了更正并添加了一些编辑细节，似乎这些功能只能运行一次。我进行了更正并添加了一些编辑细节，这些函数似乎只能运行一次。这通常发生在您从javascript创建html时，DOM无法读取id，因此请将按钮上的事件行更改为：$（'.btn-next-1'）。on（'click'，'#next'，function（），而不是：$（'#next'）。on（'click'，function（）{