jQuery can change the text of input submit type but button is no longer clickable

Question

I am using jaquery and jquery mobile version 1.8 and I have a button like so:

   <div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
        <input type="submit" name="Next" id="NextButton" value="Save"  /> 
   </div>

And I have a javascript that can change the text for it like so:

     $('#AnyButton').live('click', function() {             
        if(true)
        {
            $('#myButton div').text('Saving')
        }
        else
            $('#myButton div').text('Continue');
    });

I tried so many other ways that didn't work but this works however after I change the text the button seems to replace the myButton div content with the text Saving or Continue and thus the button is no longer clickable.

In my browser debugger the button shows a text Save appear between myButton and the Nextbutton input.

Like so:

<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
"Save"
      <input type="submit" name="Next" id="NextButton" value="Save"  /> 
</div>

Answer 1

I suspect there is more to your code than you have presented. With jQuery Mobile, each input is read as a Button. So you mnay need to refresh it after a dynamic update.

This code is working:

$(function() {
  $("#NextButton").click(function(e) {
    e.preventDefault();
    $(this).val("Saving").button("refresh");
  });
});

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
  <input type="submit" name="Next" id="NextButton" value="Save" />
</div>

See More: https://api.jquerymobile.com/button/ and https://demos.jquerymobile.com/1.4.5/button/