How to prevent a button from remaining highlighted

Question

I've my first endavour into javascript and jquery (mobile) but now ran into something that I just can't get resolved.

I have a simple form with 4 buttons, when one is clicked a command is submitted to the server (using ajax). Thing is with the interface, that the button clicked (lightgrey to begin with) turns blue and does not return to its original state. Not even when another button is clicked, so after a few clicks, all buttons are blue.

Here is a link to a test page (with ajax commands disabled)

And this is the page;

<div id="mainPageHaard" data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="index.html" data-icon="arrow-l" data-iconpos="notext" >Back</a>
        <h1>Haard</h1>
        <a href="index.html" data-icon="home" data-iconpos="notext" >Home</a>
    </div><!-- /header -->

    <div data-role="content">
        <a id="btnHaardMax" data-role="button" data-icon="arrow-u">Maximaal</a>
        <a id="btnHaardUp" data-role="button" data-icon="plus">Harder</a>
        <a id="btnHaardDown" data-role="button" data-icon="minus">Zachter</a>
        <a id="btnHaardMin" data-role="button" data-icon="arrow-d">Waakvlam</a>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <a href="#configPageHaard" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Config</a>
    </div><!-- /footer -->
</div><!-- /page -->

And the javascript

$(document).ready(function() {

    $("#btnHaardMax").click(function(){
        //SendEvent("Gashaard_MAX", 18);
        return true; 
    });
    $("#btnHaardUp").click(function(){
        //SendEvent("Gashaard_UP", 18);
        return true; 
    });
    $("#btnHaardDown").click(function(){
        //SendEvent("Gashaard_DOWN", 18);
        return true; 
    });
    $("#btnHaardMin").click(function(){
        //SendEvent("Gashaard_MIN", 18);
        return true; 
    });
    $("#btnHaardStart").click(function(){
        //SendEvent("Gashaard_START", 18);
        return true; 
    });
    $("#btnHaardStop").click(function(){
        //SendEvent("Gashaard_STOP", 18);
        return true; 
    });

});   

I suspect it to be something silly, but would appreciate if someone could point me exactly at the sillyness in my code

Thx!

Answer 1

Short answer: you need to remove the css class ui-btn-active on the mouse event onclick is finished.

How? you say?

  $().ready(function(){
    $('some-selector').mousedown(function(){
      $('some-selector').addClass('ui-btn-active');
    })
    $('some-selector').mouseup(function(){
      $('some-selector').removeClass('ui-btn-active');
    })
  })