Question

我正试图从这个JQuery Mobile标记片段中删除'ui-btn-active'类：

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

试一试here。

诀窍是使用.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/

使用jQuery附加onClick处理程序的问题

2 个答案: