發行附加的onClick處理程序使用jQuery

我想從這個jQuery Mobile的標記部分刪除「UI-BTN-主動」類：發行附加的onClick處理程序使用jQuery

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

什麼實際上，我試圖完成，是防止在導航欄點擊的按鈕變爲高亮顯示。

來源

2012-03-06 chris

如果這是您的實際代碼，您的span標籤格式錯誤（缺少結束標籤）。這可能會導致你所看到的行爲。 – 2012-03-06 03:30:01

對不起，補充了缺失的部分。 – chris 2012-03-06 03:42:17

確保沒有任何具有相同ID的其他元素。 – Jeff 2012-03-06 03:44:24

下面的代碼似乎很好地工作：

<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（）方法，該方法將附加一個持久化事件處理程序。還要注意，它會捕獲點擊和點擊事件（因爲我認爲你正在開發一個移動應用程序）。

來源

2012-03-06 04:06:54 Joe

看起來像一個非常有效的想法，但如果使用JQM，它似乎不起作用。 – chris 2012-03-06 12:51:07

什麼不起作用？你做了什麼，期望和看到了什麼？我不確定沒有更多信息我可以幫助你。 – Joe 2012-03-06 14:21:37

我在Firefox中啓動頁面，單擊btnFree按鈕，但ui-btn-active未被刪除，即按鈕仍然高亮顯示，並且螢火蟲仍顯示該類別。我猜這個課程在我的移除嘗試後被添加了？另外，我按照你的建議添加了＃btnFree.ui-btn-active css代碼塊，但似乎已經過時了。 – chris 2012-03-06 15:10:52

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/

來源

2012-03-06 15:54:25 Kiliman

發行附加的onClick處理程序使用jQuery

回答

相關問題