jquery - Jquery Q：单击后刷新按钮不刷新

Question

刷新按钮不刷新，单击时不会恢复原始颜色。它只停留在蓝色背景上。如何在刷新问题的同时使其刷新。

<div data-role="navbar" >
     <ul>
          <li ><a id="PageRefresh" data-icon="refresh" >Question Shuffle</a></li>
     </ul>
</div>





<script>

$(document).ready(function() {
var jsonfile = 'data.json';

    $.getJSON(jsonfile, function(data) {
    Main(data);

    $('#PageRefresh').click(function() {
        Reload(data);
    });
});
}); 

var qData = [];
var qHint = [];

function Main(data){//Main Function
    LoadData(data);
    InitializeQuestion();

    $('#list').listview('refresh');
}

function Reload(data){//Reload Data Function
    ReInitializeQuestion();

    $('#list').listview('refresh');
}

function LoadData(data){//Preload Data Function
    var tempdata = data;
    var i=0;
    while (i<tempdata.activity.length) {
        var index = Math.floor(Math.random() * tempdata.activity.length);
        qData[i] = tempdata.activity[i].question;
        qHint[i] = tempdata.activity[i].hint;
        i++;
    }
}

function InitializeQuestion(){//Init Function
    var index = randList(30, 8, true);
    for (var i = 0; i < 8; i++) {
        question(qData[(index[i]-1)], i);
        hint(qHint[(index[i]-1)], i);
        $('#text' + (i + 1)).textinput();
        $('#submit' + (i + 1)).button();
        $('#cancel' + (i + 1)).button();
    }
}

function ReInitializeQuestion(){//ReInit Function
    var index = randList(30, 8, true);
    for (var i = 0; i < 8; i++) {
        ResetQuestion(qData[(index[i]-1)],qHint[(index[i]-1)], i);
    }
}

function question(data, i){

    $('#list').append('<li ><a href=#mypanel'+ (i + 1)+' id=list'+ (i + 1)+'>'+ data + '</a></li>'); // list item
     $('#mypanel' + (i + 1)).append("<div align='center' style='margin-top:30px;'><font style='font-family:Helvetica, Arial, sans-serif ;color:white;' size='5px' ><b>Question</b><br/><br/>"+ data + "</font></div><br/>");// panel item
    window.console.log(i);
}
function hint(data, i){
    $('#mypanel' + (i + 1)).append("<label for=text" + (i + 1) + " id=panel"+ (i + 1)+ " style='margin-top:10%;text-align:center;color:white;'><span id=panelTitle"+ (i + 1) +" >Hint: "+ data + "</span></label>");// panel item
    $('#panel' + (i + 1)).append('<input type="text"  name="name" id=text'+ (i + 1) + ' ><input type="hidden"  id=text'+ (i + 1) + ' >');
    $('#mypanel' + (i + 1)).append('<a href="#header" data-role="button" name="submit" id=submit'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="check" style="margin-left:75px;">Submit</a>');
    $('#mypanel' + (i + 1)).append('<a href=#mypanel'+ (i + 1)+ ' data-role="button" id=cancel'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="delete2" style="margin-left:75px;">Cancel</a>');
 }

 function ResetQuestion(QuestDat,HintDat, i){//Reset Function
    $('#list'+(i + 1)).text(QuestDat);
    $('#panelTitle'+(i + 1)).text(HintDat);
 }

 function randList(max, num, shuffled){//Non Repeat Random Function
    tempArray = [];
    for (i = 0; i < max && num > 0; ++i) {
        if (Math.floor(Math.random() * max - i) < num) {
            tempArray.push(i + 1);
            num--;
        }
    }
    if (shuffled) {
        tempArray.sort(function () {
            return Math.floor(Math.random() * 2) ? true : false;
        });
    }
    return (tempArray);
}
</script>

Answer 1

这可以通过几种方式来预防。

解决方案 1 - 单按钮解决方案

$('#PageRefresh').on('click', function() {
    // Rest of your code goes here
    var btn = $(this);
    var interval =  setInterval(function(){
        btn.removeClass("ui-btn-active ui-btn-up-a"); // This line will remove active button state
        clerarInterval(interval);
    },1);                
})

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/asHqx/

基本上，当单击按钮时，您可以从中删除类ui-btn-active。这将删除蓝色背景。

解决方案 2 - 多按钮解决方案

在 mobileinit 事件中将其完全关闭，如下所示：

$(document).bind('mobileinit', function () {
    $.mobile.activeBtnClass = 'unused';
});

需要记住的是，mobileinit 事件必须在 jQuery Mobile 初始化之前触发，如下所示：

<script src="jquery.js"></script>
<script>
    $(document).bind('mobileinit', function () {
        $.mobile.activeBtnClass = 'unused';
    });
</script>
<script src="jquery-mobile.js"></script>

在此处阅读有关它的更多信息：使用 jQuery Mobile 的自动初始化

工作示例：http: //jsfiddle.net/Gajotres/HALuu/