Question

I’m trying to remove the ‘ui-btn-active’ class from this JQuery Mobile markup piece:

<a id="btnFree" class="ui-btn ui-btn-icon-top ui-btn-up-a ui-btn-active"
 onclick="setStatus('free')" data-icon="alert" data-iconpos="top"
 data-role="button" href="#" data-theme="a">

   <span class="ui-btn-inner">
   <span class="ui-btn-text">Free</span>
   <span class="ui-icon ui-icon-shadow ui-icon-check"></span>
   </span>
</a>

I’m using this as the onclick function but the last line doesn’t work:

function setStatus() {
    $("#btnFree").children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-alert');
    $("#btnFree").children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
    $("#btnFree").removeClass('ui-btn-active');
    }

By looking at Firebug it doesn’t seem to change anything. Other instructions in the function work fine, so I don’t know what I’m missing. Any hints?

The actual code I wrote is the following, which gets translated to the above by JQM:

<div data-role="navbar" id="nvb1">
   <ul>
     <li><a href='#' data-role="button" id="btnFree" data-iconpos="top" data-icon="alert" onClick="setStatus('free')">Free</a></li>
     <li><a href='#' data-role="button" id="btnBusy" data-iconpos="top" onClick="setStatus('busy')">Busy</a></li>
   </ul>
</div>

What I’m actually trying to accomplish, is preventing a clicked button in a navbar to become highlighted.

Answer 1

The following code seems to work fine:

<div data-role="page">
    <div data-role="navbar" id="nvb1">
   <ul>
     <li><a href='#' data-role="button" id="btnFree" data-iconpos="top" data-icon="alert">Free</a></li>
     <li><a href='#' data-role="button" id="btnBusy" data-iconpos="top" onClick="setStatus('busy')">Busy</a></li>
   </ul>
</div>
</div>
​<script>
$("#btnFree").live("click tap", function() {
    $("#btnFree").children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-alert');
    $("#btnFree").children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
    $("#btnFree").removeClass('ui-btn-active');
});​
</script>​​​​​​

Try it here.

The trick is using the .live() method, which will attach a persistent event handler. Also note that it will capture both the click and tap events (since I presume you are developing a mobile app).