1

jquery mobile を使用して phonegap アプリケーションを構築しています。10 の異なるステップごとに同様のデータを表示する 1 つのページ div があります。私のデータは 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

Use .trigger('create') after appending new items into [data-role=page]. This will re-enhance the markup of your code as you're using .html().

There is no need to refresh or reload the page. However, if you want to give the feeling that the page is being refreshed, you can reload the same page using $.mobile.changePage() with option allowSamePageTransition: true.

Check this example.

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 のユーザーは、.live() よりも .delegate() を使用する必要があります。」

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 に答える