1

我正在使用 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>
4

2 回答 2

3

在将.trigger('create')新项目附加到[data-role=page]. 这将在您使用.html().

无需refresh或重新加载页面。但是，如果您想给人一种页面正在刷新的感觉$.mobile.changePage()，您可以使用with option重新加载同一页面allowSamePageTransition: true。

检查这个例子。

var currentStep = 0;
$("#nextStep").on('click', function() {
 if (currentStep <9){
  currentStep++;
  setRubricInfo();
 }
 $('[data-role=page]').trigger('create');
});
于 2013-04-29T16:30:45.400 回答
0

什么版本的jQuery？ .live()已弃用。

“从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 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/

于 2013-04-29T15:36:10.690 回答