Page JQuery Mobile Pas Rafraîchissante

Question

J'ai fait mon travail à la maison mais je ne peux pas le faire fonctionner. Les styles de bouton ne sont pas actualisés Veuillez nous aider.

 <div id="qpage" data-role="page"> 
     <div data-role="header"> 
      <a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a> 
      <h1 id="ques-title">#ques-title</h1></div> 
     <div data-role="content"> 
      <div class="ui-bar-a" id="ques-timer"> 
       #ques-timer 
      </div> 
      <div id="question"><h3>#Question</h3></div> 
      <div class=".button-set" data-role="controlgroup" id="answerbox"> 
       <a data-role="button" id="answer_1">#answer_1</a> 
       <a data-role="button" id="answer_2">#answer_2</a> 
       <a data-role="button" id="answer_3">#answer_3</a> 
       <a data-role="button" id="answer_4">#answer_4</a> 
      </div> 
      <div id="explanation"> 

      </div> 
     </div> 
     <div data-role="footer"><h2>Copyright Kaveen</h2></div> 
    </div> 

C'est Th Javascript j'ai écrit

  $("#subject1").bind('click',function(){ 
      var json = $.get("test.json",function(data){ 
       $("#question").html(data.question); 
       $("#answer_1").html(data.mcq_1); 
       $("#answer_2").html(data.mcq_2); 
       $("#answer_3").html(data.mcq_3); 
       $("#answer_4").html(data.mcq_4); 
      }); 

j'ai essayé $("div[data-role=page]").page("destroy").page(); Mais il ne fonctionnera pas Plese Aidez-moi je vous remercie. jsFiddlehttp://jsfiddle.net/xRTCu/

Answer 1

Essayez cela, il devrait fonctionner:

$("#answer_1").button("refresh"); 

Si cela ne fonctionne pas, essayez ceci

$("#answer_1").buttonMarkup(); 

EDIT: jsFiddle mis à jour http://jsfiddle.net/androdify/xRTCu/4/ Utilisez ceci:

$("#answer_1 .ui-btn-text").text(data.mcq_1); 

Pourquoi? Parce que ajoute mobile jquery une portée autour du bouton qui a class="ui-btn-text"

Answer 2

Essayez $("div[data-role=page]").trigger ("create") si vous utilisez la dernière version de jQuery mobile. page était obsolète il y a quelques versions.

Si vous utilisez une ancienne version de jQM, vous pouvez utiliser $("[data-role=button]").button().button ("refresh") après avoir ajouté vos données JSON dans ces boutons.

EDIT

De votre violon, je vois que vous utilisez html() et que l'effacement est le balisage de JQM. C'est ce que data-role=button convertit votre balisage:

<a data-role="button" id="answer_1">#answer_1</a> 

//becomes 

<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text">mcq wrong</span> 
    </span> 
</a> 

Ainsi, en utilisant tout ce que vous êtes html() effacer efficacement l'intérieur a. Essayez ui-btn-text classe à l'intérieur a comme celui-ci, puis exécutez html avec votre texte en elle:

$(".ui-btn-text", "#answer_1").html(data.mcq_1); 
//OR 
$("#answer_1").find(".ui-btn-text").html(data.mcq_1); 

Voici votre démo mise à jour: http://jsfiddle.net/hungerpain/xRTCu/3/