JQuery Мобильная страница Не обновляется

Question

Я сделал свою домашнюю работу, но я не могу заставить ее работать. Кнопки стилей не освежают Пожалуйста, помогите.

 <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> 

Это че Javascript я написал

  $("#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); 
      }); 

я действительно пытался $("div[data-role=page]").page("destroy").page(); Но это не будет работать Plese Help Me Спасибо. JSFIDDLEhttp://jsfiddle.net/xRTCu/

Answer 1

Попробуйте это, он должен работать:

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

Если это также не работает, попробуйте это

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

EDIT: jsfiddle обновленный http://jsfiddle.net/androdify/xRTCu/4/ Используйте это:

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

Почему? Поскольку JQuery мобильный добавляет промежуток вокруг кнопки, которая имеет class="ui-btn-text"

Answer 2

Попробуйте $("div[data-role=page]").trigger ("create"), если вы используете последнюю версию JQuery мобильного телефона. page устарел для некоторых версий.

Если вы используете старую версию jQM, вы можете использовать $("[data-role=button]").button().button ("refresh") после того, как вы закончите добавлять данные JSON в эти кнопки.

EDIT

С вашей скрипкой я могу видеть, что вы используете html() и это стирать разметку jQM в. Это то, что data-role=button преобразует разметку:

<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> 

Итак, используя html() Youre эффективно удаляя все внутри a. Попробуйте найти ui-btn-text класса внутри a, как это и затем запустить html с текстом в ней:

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

Вот ваш обновленный демо: http://jsfiddle.net/hungerpain/xRTCu/3/