JQuery, Changing button on different clicks

Question

I'm setting up a registration form and using JQuery to change a button type after pressing 'next'.

This currently works but I would like the button to revert in the case 'back' is pressed.

My code is below.

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

And the block of HTML in question is below.

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

UPDATE

I've updated the JS to the below

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

However, I am now finding myself in a strange issue.

The button indeed works, it changes the state of my application.

But once "back" is clicked and the button switches back to "next". the "next" button does not seem to function or switch again to a "submit" button.

In other words, it seems these functions are only capable of working once each.

Answer 1

You should change the second selector to be the same as the first one. Because with the .html() you are changing the content of the container div of the nex, but that div is still there. If you use:

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

it will return to the original state.

Answer 2

Everything seems to be ok, but you dont have any selector with 'btn-submit-1', with the corrections your code for back button must be like this:

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