2012-09-15 61 views
0

我正嘗試在使用jQuery Mobile的移動應用程序中使用未鏈接的按鈕。我仍然希望按鈕是可以點擊的,但不是我想用我自己的默認ajax行爲。未鏈接的按鈕和鏈接按鈕不顯示在jQuery Mobile中的點擊動畫/狀態更改

但是,當我點擊一個沒有鏈接的按鈕時,它不會給出任何反饋。也就是說,CSS不會更改爲按下狀態,然後再返回。當我點擊一個具有有效href的鏈接或者它在一個表單中工作時。

奇怪的是,我的桌面瀏覽器中的單擊鏈接確實會調用更改,儘管它與點按按鈕不同。使用默認的CSS軟件包按鈕會在點擊提交表單或進入下一頁時瞬間變成藍色。當我在桌面上點擊它們時,它們會變成灰色的懸停狀態,因此看起來這在任何瀏覽器上都不起作用。

有誰知道如何獲得一個簡單的按鈕來響應點擊即使按鈕實際上並沒有鏈接到任何地方?

編輯:這裏有一些代碼嘗試我在iOS和Android上嘗試了這一點,結果相同。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Page</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script> 
    </head> 

    <body> 

     <div data-role="page" id="startpage"> 
      <div data-role="header" data-theme="c"> 
       <h1>Button Test</h1> 
      </div> 
      <div data-role="content"> 
       <button id="test1">Test 1</button> 
       <button data-role="button" id="test2">Test 2</button> 
       <a data-role="button" id="test3">Test 3</a> 
       <a data-role="button" href="" id="test4">No href</a> 
       <a data-role="button" href="#" id="test5">href=#</a> 
       <a data-role="button" href="#page2" id="test6">This works because it's linked</a> 
       <form method="get" action="index2.html"> 
        <input type="text" name="name" placeholder="Name"/> 
        <button type="submit" value="No tap change here either"></button> 
       </form> 
      </div><!-- /content --> 
     </div><!-- /page --> 

     <div data-role="page" id="page2"> 
      <div data-role="header" data-theme="c"> 
       <h1>Page 2</h1> 
      </div> 
      <div data-role="content">Linked buttons work</div> 
     </div> 

    </body> 
</html> 
+0

嗨!你能提供一些代碼嗎? – Littm

+0

Yup補充了一個例子。即使表單提交按鈕也不會更改爲點按狀態。 – kvedananda

+0

這在大多數情況下工作:http://jsfiddle.net/Wgu9v/ –

回答

1

好的我最終提交了一個jQuery Mobile問題跟蹤器中的錯誤,它似乎是一個已知問題。

https://github.com/jquery/jquery-mobile/issues/5009 https://github.com/jquery/jquery-mobile/issues/4469

的解決方法是使用像這樣的鏈接按鈕:

<a href="javascript:void(0)" data-role="button">Click me</a> 

隨着該按鈕會向用戶提供反饋,即使它沒有真正去任何地方或做任何事情。

他們正在研究在v1.3中修復此問題。