刷新按钮上的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/