輸入提交按鈕由於排序而丟失值

Question

我正在將我的頭撞到一堵磚牆上。我的猜測是，這是首先出現的問題，但我似乎無法弄清楚發生這種情況的順序。

基本場景： 這是一個PhoneGap應用程序（但這是一個特別的JavaScript問題）。一個index.html文件和一個.js文件，用於向運行到數據庫的PHP文件發送ajax調用，並返回要在應用程序中使用的信息。

jQuery和jQuery Mobile的都被使用，也使的index.html被分解成，我可以回去之間來回頁面元素（這可能是相關的）

到目前爲止好。登錄後，用戶轉到一個頁面，在該頁面中運行設置的間隔函數，該函數使用ajax查詢php，然後數據庫獲取答案並將其發送回鏈並導致一個操作。

其中一個動作是「天啊有一個新的問題，我將設置所有變量到本地存儲，然後通過改變頁面：

$.mobile.changePage("#pageX", {transition:"slide", changeHash:false}); 

現在我有一個運行。對一個函數（「pagebeforeshow」：

$(function() { 
    $(document).on("pagebeforeshow", "#pageX", function() { 
     document.getElementById("username").innerHTML = window.localStorage.getItem("username"); 
     document.getElementById("score").innerHTML = window.localStorage.getItem("score"); 
     document.getElementById("category").innerHTML = window.localStorage.getItem("category"); 
     document.getElementById("mob_question_question").innerHTML = window.localStorage.getItem("mob_question_question");  
     return false; 
    }); 
}); 

這一切工作一種享受

現在的有點棘手我在含輸入類型=「提交」每一個html的四種形式：

<form id="question1"><input id="answer1" type="submit" value="" data-transition="slide" data-theme="a"></form> 
<form id="question2"><input id="answer2" type="submit" value="" data-transition="slide" data-theme="a"></form> 
<form id="question3"><input id="answer3" type="submit" value="" data-transition="slide" data-theme="a"></form> 
<form id="question4"><input id="answer4" type="submit" value="" data-transition="slide" data-theme="a"></form> 

這就是背景，現在是問題。我正在尋找設置按鈕的值在ajax調用發送的答案（我已檢查，以確保正確的信息正在發送）

我似乎無法實現JavaScript中的任何JavaScript pagebeforeshow函數，因爲它不會填充按鈕，但設法弄清楚我需要將HTML放在html中的按鈕之後。我還包括了我用來隨機確定每個人的答案的JavaScript。

<script> 
    var answers = [window.localStorage.getItem("correct"), window.localStorage.getItem("wrong1"), window.localStorage.getItem("wrong2"), window.localStorage.getItem("wrong3")]; 
    var index = Math.floor(Math.random() * answers.length); 
    var answer1 = answers[index]; 
    answers.splice(index, 1); 
    index = Math.floor(Math.random() * answers.length); 
    var answer2 = answers[index]; 
    answers.splice(index, 1); 
    index = Math.floor(Math.random() * answers.length); 
    var answer3 = answers[index]; 
    answers.splice(index, 1); 
    index = Math.floor(Math.random() * answers.length); 
    var answer4 = answers[index]; 
    answers.splice(index, 1); 
    window.localStorage.setItem("answer1", answer1); 
    window.localStorage.setItem("answer2", answer2); 
    window.localStorage.setItem("answer3", answer3); 
    window.localStorage.setItem("answer4", answer4); 

    document.getElementById("answer1").value = window.localStorage.getItem("answer1"); 
    document.getElementById("answer2").value = window.localStorage.getItem("answer2"); 
    document.getElementById("answer3").value = window.localStorage.getItem("answer3"); 
    document.getElementById("answer4").value = window.localStorage.getItem("answer4"); 
</script> 

畢竟是正在發生的事情是整個事情正在與不同之處在於，當按鈕拿出他們拿出在localStorage的答案，最後加載的版本，並會留全部通過問題（即問題的變化，但答案是一樣的）。

就像我在開始時所說的，我猜這是爲了加載錯誤順序的提交按鈕的值，或者在第一次運行後錯過了這個JavaScript。任何關於如何解決這個問題的建議都將受到熱烈的讚賞。

Answer 1

jQuery Mobile增強了按鈕，使得文本不再是輸入的值，而是由jQM創建的DIV內的html。所以，你只需要告訴JQM設定值後刷新小部件：

所以不是

document.getElementById("answer1").value = window.localStorage.getItem("answer1"); 
document.getElementById("answer2").value = window.localStorage.getItem("answer2"); 
document.getElementById("answer3").value = window.localStorage.getItem("answer3"); 
document.getElementById("answer4").value = window.localStorage.getItem("answer4"); 

使用jQuery和調用。按鈕（「刷新」）

$("#answer1").val(window.localStorage.getItem("answer1")).button("refresh"); 
$("#answer2").val(window.localStorage.getItem("answer2")).button("refresh"); 
$("#answer3").val(window.localStorage.getItem("answer3")).button("refresh"); 
$("#answer4").val(window.localStorage.getItem("answer4")).button("refresh"); 

DEMO