Question

我在设置注册表单并使用JQuery按下＆＃39; next＆＃39;后更改按钮类型。

这目前有效，但我希望按钮在案例中恢复＆＃39;返回＆＃39;被按下了。

我的代码如下。

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

然而，我现在发现自己处于一个奇怪的问题。

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

但是一旦＆＃34;回来＆＃34;单击，按钮切换回＆＃34; next＆＃34;。＆＃34; next＆＃34;按钮似乎无法运行或再次切换到＆＃34;提交＆＃34;按钮。

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

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

JQuery，更改不同点击的按钮

2 个答案: