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();但它不会工作普莱舍帮助我谢谢你。 JSFIDDLEhttp://jsfiddle.net/xRTCu/

Answer 1

试试这个，它应该工作：

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

如果这也不起作用，试试这个

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

编辑：更新的jsfiddle http://jsfiddle.net/androdify/xRTCu/4/ 使用此：

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

为什么？因为jQuery Mobile的周围增加了具有class="ui-btn-text"

Answer 2

如果您使用的是最新版本的jQuery mobile，请尝试$("div[data-role=page]").trigger ("create")。 page在某些版本之前已被弃用。

如果您使用的是旧版本的jQM，那么在完成将JSON数据附加到这些按钮后，您可以使用$("[data-role=button]").button().button ("refresh")。

编辑

从你拨弄我可以看到你正在使用html()而这擦除JQM的标记。这是data-role=button您的标记转换：通过使用html()您选择有效消除内部a一切

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

左右。试着这样搜索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/