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点击按钮，但没有任何反应

回答

相关问题