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

如果您使用的是最新版本的jQuery 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内的所有内容。尝试在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/

JQuery Mobile页面没有刷新

2 个答案: