jQuery Mobile页面不刷新

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(); 但这是行不通的。请帮我，谢谢。 JSFIDDLE http://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

如果您使用的是最新版的jQu​​ery mobile，请尝试$( "div[data-role=page]" ).trigger ("create") 。 某些版本不推荐使用该page 。

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

编辑

从您的小提琴中，我可以看到您正在使用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()您可以有效擦除内a所有内容。 尝试像这样在a搜索ui-btn-text类，然后在其中输入文本的方式运行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/