单击按钮刷新页面 div答案

【问题标题】：Refresh page div on button click单击按钮刷新页面 div
【发布时间】：2013-04-29 15:24:21
【问题描述】：

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

【问题讨论】：

什么是currentStep，它的价值从何而来？
这是一个黑客，但 location.href = location.href 强制重新加载（而不是 location.reload()），至少在 chrome 上，也许它有帮助
@PitaJ 这没用。如果您愿意提供帮助，请提供 new 方法和链接
currentStep 只是在我的代码开头贴上的一个 var。它默认设置为 0，并指向我的 JSON 数组中的一个项目。
应该可以。仅用于测试，请尝试使用location.reload(true);。另外，使用.on() 函数而不是.live()

标签： javascript jquery jquery-mobile

【解决方案1】：

在将新项目附加到[data-role=page] 后使用.trigger('create')。这将在您使用 .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');
});

【讨论】：

currentStep 怎么在这里递增，在if 语句里面
var currentStep 在if @c--misura 之外，请查看我的答案中的示例。
但它在if 语句@Omar 中递增
它需要增加一级直到它的值是9。@c--misura
@Omar 是的！这正是我想要的，它完美地工作。谢谢！而且我的增量是在正确的位置，否则重复单击按钮可能会使 var 超过我的数组中的项目数，从而导致问题。

【解决方案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/

【讨论】：

谢谢，我应该知道这个，我以前用过。但这并不能解决我的问题。它只是挂起并给了我永远旋转的动画。
这不等同于live。这是正常的事件处理。你需要使用事件委托，比如$("#container_id").on("click", ".element-class", function () { });