Text inputs not updating

Text inputs not updating

I have a problem in that <input> text fields eventually stop working in my form. Initially, they will allow input and I can switch between fields and type in them, but eventually (and the amount of time it takes seems arbitrary), the fields will stop updating even if I type in them.

This is on Android. Not sure about iOS, as this is within a Phonegap application that I'm currently only testing on Android. 

jQuery version: 1.7.2
jQuery Mobile version: 1.2.0
jQuery Mobile CSS version: 1.2.0


The HTML for my form is:
  1. <form id="account-add" data-ajax="false" autocomplete="off">
  2. <div data-role="fieldcontain" class="ui-hide-label">
  3. <label for="custom-name">
  4. </label>
  5. <input id="custom-name" name="custom-name" placeholder="" value="<?=$serviceName;?>" type="text">
  6. </div>
  7. <div data-role="fieldcontain" class="ui-hide-label">
  8. <label for="custom-<?=$fieldsArray['Username'];?>">
  9. </label>
  10. <input id="custom-<?=$fieldsArray['Username'];?>" name="custom-<?=$fieldsArray['Username'];?>" placeholder="" value="<?=$valuesArray['Username'];?>" type="text" onblur="if(this.value == '') { this.value = 'User ID'; }">
  11. </div>
  12. <div data-role="fieldcontain" class="ui-hide-label">
  13. <label for="custom-<?=$fieldsArray['Password'];?>">
  14. </label>
  15. <input id="custom-<?=$fieldsArray['Password'];?>" name="custom-<?=$fieldsArray['Password'];?>" placeholder="" value="<?=$valuesArray['Password'];?>" type="password" onblur="if(this.value == '') { this.value = 'Password'; }">
  16. </div>

  18. <input type="hidden" name="action" value="edit-2">
  19. <input type="hidden" name="accounteditid" value="<?=$accountEditId;?>">
  20. <input type="hidden" name="userid" value="<?=$userId;?>">
  21. <input id="account-edit-submit" type="submit" name="account-edit-submit" value="Update Account">
  22. </form>
It is dynamically loaded by:
  1. $("#account-input-holder").html(ajaxData).trigger("create");

Into the pre-existing HTML:
  1. <div data-role="page" id="page-addedit" style="overflow-x:hidden;">
  2.    <div data-theme="a" data-role="header" data-position="fixed">
  3. <div data-role="content" style="width:100%; padding:1% 0 1% 0; text-align:center;">
  4. <img src="img/header-logo.png" style="width:60%;">
  5. </div>
  6. <div data-role="navbar" data-iconpos="false">
  7.             <ul>
  8.                 <li>
  9.                     <a href="#page-home" data-theme="b" data-icon="false">
  10.                         <img src="img/navigation-home.png" style="height:30px;"><br>
  11. Home
  12.                     </a>
  13.                 </li>
  14.                 <li>
  15.                     <a href="#page-vault" data-theme="b" data-icon="false" class="ui-btn-active ui-state-persist">
  16.                         <img src="img/navigation-vault.png" style="height:30px;"><br>
  17. Accounts
  18.                     </a>
  19.                 </li>
  20.                 <li>
  21.                     <a href="#page-account" data-theme="b" data-icon="false">
  22.                         <img src="img/navigation-settings.png" style="height:30px;"><br>
  23. Settings
  24.                     </a>
  25.                 </li>
  26. <li>
  27.                     <a href="#page-help" data-theme="b" data-icon="false">
  28.                         <img src="img/navigation-help.png" style="height:30px;"><br>
  29. Help
  30.                     </a>
  31.                 </li>
  32.             </ul>
  33.         </div>
  34.     </div>
  35. <div data-role="content">
  36. <a href="#page-search" id="button-back-addedit" data-role="button" data-appintent="pagechange" data-icon="back">
  37. Go Back
  38. </a>
  39. <div data-role="content" id="account-form-result" style="display:none;"></div>
  40. <div data-role="content" id="account-input-holder" style="margin:0; padding:0;">
  41. </div>
  42.     </div>
  43. </div>
I've noticed that if I remove all but one (any one) of the first three fields (fieldcontain divs can remain and it doesn't affect this), the text update always works. I can focus and unfocus the field all day long and it will always update. But once I include the other two inputs, if I switch between them, eventually the fields stop updating.

Any idea what could be causing this and what I can do to resolve it? I never expected that something simple like text input would give me issues. Note that even if I turn off input enhancing by using "data-role='none'", the problem still occurs.

I noticed in the documentation that this code is provided for dynamically-generated forms:
  1. $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
Should I be using this instead of $(-containing-field-here-).html(-the-form-html-).trigger("create")? I use that code so I can replace the entire HTML of the containing DIV rather than the example code which appends the form, but I can always clear the containing DIV then append the form through the suggested code, but I am not sure if this makes a difference.