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（）方法。使用.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/

单击按钮时刷新页面div

2 个答案: