刷新按鈕上的div div點擊

Question

我正在使用jquery mobile構建phonegap應用程序。我有一個頁面div顯示10個不同步驟中的每一個的類似數據。我的數據正在從JSON中讀入。我可以通過單擊一個按鈕來正確評估步驟，並通過使用pagebefore show（如果我離開頁面然後返回）顯示此信息。但是當我點擊它時，我希望按鈕刷新（重新加載）當前頁面和新信息。我似乎無法得到它的工作。我試過location.reload()和其他一些無濟於事。有人可以在這裏幫助新手嗎？

的Javascript：

var currentStep = 0; 

$.getJSON("rubric.json", function(data) { 
    jsonRubric = data; 

}); 

$("#nextStep").on('click', function() { 
if (currentStep <9){ 
currentStep += 1; 
location.reload(true);} 
}); 

function setRubricInfo() { 
    $('#rubricTitle').html(jsonRubric.rubric[currentStep].title); 
    $('#criteria').html(jsonRubric.rubric[currentStep].criteria); 
    $('#meets').html(jsonRubric.rubric[currentStep].meets); 
    $('#dnmeet').html(jsonRubric.rubric[currentStep].dnmeet); 
    $('#exceeds').html(jsonRubric.rubric[currentStep].exceeds); 
} 
$("#stepOneRubric").on("pagebeforeshow", function(){ 
setRubricInfo(); 
}); 

"#nextStep"是我的按鈕，"#StepOneRubric"是我的網頁DIV。內容的所有變化都發生在當前pagebeforeshow上。

HTML：

<!-- Step 1 Rubric/page14 --> 
<div id="stepOneRubric" data-role="page"> 
    <div data-role="header" data-theme="a"> <a class="ui-btn-left" href="#eightStepHome" data-role="button" data-iconpos="notext" 
      data-icon="arrow-l"> Button </a> 
    <h3> Step One Rubric </h3> 
    </div> 
    <div data-role="content"> 

    <div align="center"> 
    <h4 id="rubricTitle"> sfasfd </h4> 
</div> 

    <div id=rubricCollapsible data-role="collapsible-set"> 
     <div data-role="collapsible" data-collapsed="true"> 
     <h3> Criteria </h3> 
     <p id="criteria"> Critera text</p> 
     </div> 
     <div data-role="collapsible" data-collapsed="true"> 
     <h3> Does Not Meet </h3> 
     <p id="dnmeet"> Critera text</p> 
     </div> 
     <div data-role="collapsible" data-collapsed="true"> 
     <h3> Meets </h3> 
     <p id="meets"> Critera text</p> 
     </div> 
     <div data-role="collapsible" data-collapsed="true"> 
     <h3> Exceeds </h3> 
     <p id="exceeds"> Critera text  
     <div data-role="controlgroup" data-type="horizontal"> 
       </div> 
     </div> 

     </div> 
    </div> 
     <a href="#stepOneRubric" id= "nextStep" data-role="button" data-theme="b" > Next 
     </a> 
      <div id = "nextStep" a href = "#stepOneRubric" data-role="button" data-theme="b" > Next 
     </div> 
     </div> 

Answer 1

使用.trigger('create')追加新項目到[data-role=page]後。這會在您使用.html()時重新提高代碼的標記。

沒有必要refresh或重新加載頁面。但是，如果您想讓感覺頁面正在刷新，則可以使用$.mobile.changePage()（選項allowSamePageTransition: true）重新加載相同的頁面。

Check this example.

var currentStep = 0; 
$("#nextStep").on('click', function() { 
if (currentStep <9){ 
    currentStep++; 
    setRubricInfo(); 
} 
$('[data-role=page]').trigger('create'); 
}); 

Answer 2

jQuery的是什麼版本的？ .live()已棄用。

「在jQuery 1.7中，.live（）方法已過時。 使用。對（）附加事件處理程序。 用戶舊版本的jQuery的應該使用.delegate（）優先於.live（ ）「。

http://api.jquery.com/live/

使用.on()代替。

$("#stepOneRubic").on('click', '#nextStep', function() { 
    if (currentStep <9){ 
     currentStep += 1;} 
    location.reload(); 
}); 

http://api.jquery.com/on/