Navbar buttons stay pressed - jquery-mobile

Question

I am using two
<li><a href="#" type="button" > text</a></li>
type buttons in the footer navbar of my application, to trigger functions in my application (not for navigation.). After each press the button stays pressed, until another button in the navbar is pressed. How can I avoid this behavior?

Answer 1

Another way to handle this is to return false from your event binding so that JQM doesn't add the class in the first place.

Answer 2

Remove manually class ui-btn-active from the last pressed button.
$('#button_id').removeClass('ui-btn-active');
EDITED
The best way is to redefine styles for class ui-btn-active, the same as for the 'unclicked' button. For example:
.ui-footer .ui-navbar .ui-btn-active {
border: 1px solid #222;
background: #333333;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #000;
background-image: -webkit-gradient(linear, left top, left bottom, from( #555), to( #333));
background-image: -webkit-linear-gradient(#555, #333);
background-image: -moz-linear-gradient(#555, #333);
background-image: -ms-linear-gradient(#555, #333);
background-image: -o-linear-gradient(#555, #333);
background-image: linear-gradient(#555, #333);
}​
Example here.

Answer 3

<button type="button" class="btn btn-default touchbtn">Test</button>
$('.touchbtn').bind('touchstart', function() {
$(this).css('background-color', 'black');
});
$('.touchbtn').bind('touchend', function() {
$(this).css('background-color', 'white');
});