2013-01-01 51 views
1

我有一個jQuery Mobile的導航欄有兩個標籤:jQuery Mobile的導航欄:讓活動標籤

<div data-role="navbar"> 
    <ul> 
    <li><a href="#" class="tab ui-btn-active">Inbound</a></li> 
    <li><a href="#" class="tab">Outbound</a></li> 
    </ul> 
</div> 

當點擊一個標籤,我想

  • 做什麼,如果它已經激活的標籤,
  • 如果點擊的選項卡變爲新的活動選項,則會執行某些操作。

按照documentation,主動標籤具有ui-btn-active課,所以我聽的點擊,看看有沒有類是出現在點擊按鈕:

$('.tab').click(function() { 

    if ($(this).hasClass('ui-btn-active')) { 
    // already active, do nothing 
    console.log("already active"); 
    } else { 
    // newly active, do something 
    console.log("newly active"); 
    } 
}); 

這已經完美工作了幾個月,但我現在看到,它完全依賴於何時將活動類從一個類中移除並添加到另一個類中的時間,相對於評估if時的時間。現在,在一些不相關的代碼發生變化後,它在桌面瀏覽器上的運行方式與之前相同,但在移動瀏覽器上,無論點擊哪個按鈕,我只獲得,即if發生得太晚。

最聰明的方法是什麼?有人可以解釋事件的順序,以及事件發生順序的不一致如何發生? click是否是正確的聽衆用於觸摸屏設備?

編輯:

我嘗試使用.on()和檢查事件對象監聽父的冒泡事件,希望它含有會更準確的班級名單,但行爲是一樣的:

$('ul').on('click','a',function(event) { 
    alert(event.currentTarget.classList.contains('ui-btn-active')); 
}); 

單擊非活動選項卡將返回false在桌面瀏覽器上,如希望,和true在移動瀏覽器上。

回答

1

恕我直言click完全適用於此目的,您可以簡單地使用變量來跟蹤活動選項卡。這裏是jsFiddle

0

我有同樣的問題,我解決了這個辦法:

$("#myselector").on('click','a',function(event) { 

    $("#myselector").find('a').each(function(i) { 
    $(this).removeClass('ui-btn-active'); 
    }); 
    $(this).addClass('ui-btn-active'); 

    // call to my function 

}); 
0

點擊有300毫秒的延遲。嘗試使用「點按」而不是「點擊」