Проблема с подключением обработчика onClick с помощью jQuery

Question

Я пытаюсь удалить класс 'ui-btn-active' из этого фрагмента разметки JQuery Mobile:

<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>

Я использую это как функцию onclick, но последняя строка не работает:

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

Глядя на Firebug, он, похоже, ничего не меняет. Другие инструкции в функции работают нормально, поэтому я не знаю, что мне не хватает. Есть намеки?

Фактический код, который я написал, следующий, который переводится в 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>

То, что я на самом деле пытаюсь сделать, это предотвратить выделение нажатой кнопки на панели навигации.

Answer 1

Следующий код работает нормально:

<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>​​​​​​

Попробуйте здесь .

Хитрость в том, чтобы использовать метод .live (), который присоединит обработчик постоянных событий. Также обратите внимание, что он будет фиксировать события как нажатия, так и нажатия (поскольку я предполагаю, что вы разрабатываете мобильное приложение).

Answer 2

Поведение по умолчанию для JQM - установка класса ui-btn-active при нажатии кнопки панели навигации. Чтобы JQM не устанавливал его, вам нужно остановить распространение события.

    $('#nvb1 a').bind('click', function(e) {

        var $btn = $(this);
        $('#status').html('Status is: ' + $btn.data('status'));

        // tell JQM that you handled the event
        e.stopPropagation();
        e.preventDefault();
    });

Я создал образец здесь. http://jsfiddle.net/kiliman/d7MvN/