Jquery Q : Refresh button is not refreshing once clicked

Question

The refresh button is not refreshing which it does not turn back to original color when it clicked. It only stay on blue background. How can i make it refresh at the same time the question is refreshed.

<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

This can be prevented in few ways.

Solution 1 - Single button solution

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

Working jsFiddle example: http://jsfiddle.net/Gajotres/asHqx/

Basically, when button is clicked, you can remove class ui-btn-active from it. That will remove blue background.

Solution 2 - Multi button solution

Turn it off completely in mobileinit event, like this:

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

Thing to remember, mobileinit event must be triggered before jQuery Mobile is initilaized, like this:

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

Read more about it here: Working with jQuery Mobile's Auto-initialization

Working example: http://jsfiddle.net/Gajotres/HALuu/