jQuery Mobile點擊按鈕，但沒有任何反應

我捅了一圈，發現了類似的問題，但沒有一個解決方案奏效。jQuery Mobile點擊按鈕，但沒有任何反應

我正在寫一個簡單的（到目前爲止）應用程序，允許用戶從表格中選擇1-6的數字，然後在另一頁上顯示該值（1-6）。它可以在我的桌面上正常工作，但是當我從iPhone模擬器中嘗試它時，我點擊「提交」，根本沒有任何反應......就好像我沒有點擊它一樣。

我使用的是jQuery 1.10.1和jQuery Mobile 1.3.1。我將補充說這是一個使用Adobe的PhoneGap Build服務的PhoneGap應用程序。

下面是我的主網頁代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Value Submit</title> 
<link rel="stylesheet" type="text/css" href="css/jquery-mobile.css" /> 
<link rel="stylesheet" type="text/css" href="css/themes/aw-theme2.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-mobile-min.js"></script> 
<script type='text/javascript'> 
    $(document).on('pageinit', function() { 
     $(document).on('click', '#submitroll', function() { 
      var dieRoll = $("#dieresult").val(); 

     $.mobile.changePage('valuedresult.html', { data: {arg1:dieRoll}}); 
     return false; 
     }); 
    }); 

    $(document).on('pageinit', '#valued', function() { 
     var dieRoll = $("#dieresult").val(); 
     $("#results span").html(dieRoll); 
    }); 
</script> 
</head> 

<body> 
<div data-role="page" id="valued" data-theme='a'> 
    <div data-role="header" data-header-theme='a'> 
    <a data-icon="back" data-rel="back" back-btn="true">Back</a> 
    <h1>Value</h1> 
    <a data-icon="home" href="index.html" data-iconpos="notext">Home</a> 
</div> 
<div data-role="content" data-theme='a'> 
    <form id="rollform"> 
    <select id="dieresult" name="dieresult"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
    </select> 
     <a href="#" data-role="button" data-inline="true" id="submitroll">Submit</a> 
    </form> 
</div> 
</body> 
</html>

這裏是爲valuedresult.html代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Value Result</title> 

<script> 
$(document).on('pageshow', function(event) { 
var url = $.url(document.location); 
var arg1 = url.param("arg1"); 

$("#results span").html(arg1); 
}); 
</script> 
</head> 

<body> 
<div data-role="page" id="valueresult" data-theme='a'> 
    <div data-role="header" data-header-theme='a'> 
     <a data-icon="back" data-rel="back" back-btn="true">Back</a> 
     <h1>Value Result</h1> 
     <a data-icon="home" href="index.html" data-iconpos="notext">Home</a> 
</div> 
<div data-role="content" data-theme='a'> 
<div id="results">Result: <span></span> 
    </div> <!-- results --> 
</div> 
</body> 
</html>

正如我所說的，它工作正常的桌面瀏覽器，但沒有任何反應在iPhone模擬器上點擊「提交」。

我已經玩了很長時間了，指的是其他帖子，文檔等......但我似乎無法讓它工作。希望我只是錯過了一些愚蠢的東西。

任何幫助表示讚賞。非常感謝您提前！

來源

2013-06-22 mrbranden

編輯：我注意到這段代碼$.url。這不是jQuery或jQuery Mobile的一部分。您錯過了Purl JavaScript URL解析器插件。您應該將其添加到第一頁的head標記中。

下面您可以找到與您發佈的代碼相關的一些修復。我刪除了引用缺少的Purl JavaScript URL解析器插件的代碼。

在第一頁中，在document元素上附加click事件處理程序就足夠了。您不需要將其包含在pageinit事件處理程序中。而不是使用return false;，最好使用event.preventDefault()以防止事件的默認行爲。我也刪除了一些不必要的代碼。

在第二頁中，我修改了您的script並將其放入jQM page中。原因是當通過Ajax加載jQM頁面時，head標籤內的script未加載。另一種解決方案是在第一頁的加載中加載這個script。

我已經修改您的示例如下：

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Value Submit</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type='text/javascript'> 
     $(document) 
      .on('click', '#submitroll', function (e) { 
       e.preventDefault(); 
       var dieRoll = $("#dieresult") 
        .val(); 

       $.mobile.changePage('valuedresult.html', { 
        data: { 
         arg1: dieRoll 
        } 
       }); 
      }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="valued" data-theme='a'> 
     <div data-role="header" data-header-theme='a'> 
      <a data-icon="back" data-rel="back" back-btn="true">Back</a> 
      <h1>Value</h1> 
      <a data-icon="home" href="index.html" data-iconpos="notext">Home</a> 
     </div> 
     <div data-role="content" data-theme='a'> 
      <form id="rollform"> 
       <select id="dieresult" name="dieresult"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
        <option value="6">6</option> 
       </select> 
       <a href="#" data-role="button" data-inline="true" id="submitroll">Submit</a> 
      </form> 
     </div> 
</body> 

</html>

valuedresult.html：

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Value Result</title> 
</head> 

<body> 
    <div data-role="page" id="valueresult" data-theme='a'> 
     <div data-role="header" data-header-theme='a'> 
      <a data-icon="back" data-rel="back" back-btn="true">Back</a> 
      <h1>Value Result</h1> 
      <a data-icon="home" href="index.html" data-iconpos="notext">Home</a> 
     </div> 
     <div data-role="content" data-theme='a'> 
      <div id="results">Result: <span></span> 
      </div> 
      <!-- results --> 
     </div> 
     <script> 
      $(document) 
       .one('pageshow', '#valueresult', function (event) { 
        var parameters = $(this) 
         .data("url") 
         .split("?")[1]; 
        parameter = parameters.replace("arg1=", ""); 
        $("#results span") 
         .html(parameter); 
       }); 
     </script> 
    </div> 
</body> 

</html>

enter image description here

我希望幫助。

來源

2013-06-22 19:28:59

非常感謝您花時間檢查我的代碼。我會嘗試更改併發布我的結果！再次感謝！ – mrbranden

好吧，我試了一下......移動瀏覽器沒有變化 - 點擊提交按鈕什麼也不做;就好像我點擊背景或其他東西。現在，當我使用桌面瀏覽器時，它不會傳遞/捕獲arg1的值。根據您的編輯，我可以使用URL參數調整代碼以使其正常工作。但是爲什麼點擊提交按鈕卻什麼都沒做，我仍然不知所措。再次感謝您的修改。我會再和他們一起玩，看看我能否實現它。進一步的建議也受到歡迎。 :-) – mrbranden

嗯，我測試了我在桌面和PhoneGap應用中發佈的代碼。確保這兩個HTML文件在構建PhoneGap應用程序時位於同一文件夾下（因爲changePage（'valuesresult.html'試圖在現有路徑中查找valuresult.html）。我還發布了一些圖像，描述了相應的PhoneGap應用程序在Android模擬器上運行 –

jQuery Mobile點擊按鈕，但沒有任何反應

回答

相關問題