Navbar buttons remain pressed

Question

I use two

<li><a href="#" type="button" > text</a></li> 

in the footer navigation bar of my application to run functions in my application (and not for navigation.). After each press, the button remains pressed until another button on the navigation bar is pressed. How can I avoid this behavior?

Answer 1

Manually remove the ui-btn-active class from the last button clicked.

 $('#button_id').removeClass('ui-btn-active'); 

edited

The best way is to override the styles for the ui-btn-active class, as well as for the unclicked button. For instance:

 .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); }​ 

An example is here .

Answer 2

Another way to handle this is to return false from the event binding so that JQM does not add the class in the first place.

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