0

我四处寻找并发现了类似的问题，但没有一个解决方案有效。

我正在编写一个简单的（到目前为止）应用程序，它允许用户在表单上从 1-6 中选择一个数字，然后在另一个页面上显示该值 (1-6)。它在我的桌面上运行良好，但是当我从 iPhone 模拟器尝试它时，我单击“提交”并且什么都没有发生......好像我什至没有点击它一样。

我正在使用 jQuery 1.10.1 和 jQuery Mobile 1.3.1。我要补充一点，这是一个使用 Adob​​e 的 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 模拟器上什么也没有发生。

我已经玩了很长时间了，参考了其他帖子、文档等……但我似乎无法让它工作。希望我只是错过了一些愚蠢的事情。

任何帮助表示赞赏。非常感谢您！

4

1 回答 1

1

编辑：我注意到了这段代码$.url。这不是 jQuery 或 jQuery Mobile 的一部分。您缺少 Purl JavaScript URL 解析器插件。您应该将它添加到第一页的head标签中。

您可以在下面找到与您发布的代码相关的一些修复。我也删除了引用缺少的 Purl JavaScript URL 解析器插件的代码。

在第一页中，click在元素上附加事件处理程序就document足够了。您不需要将它包含在pageinit事件处理程序中。此外，最好使用它来防止事件的默认行为，而不是使用return false;它。event.preventDefault()我也删除了一些不必要的代码。

在第二页中，我修改了您的script并将其放入 jQMpage中。原因是当一个jQM页面通过Ajax加载时，script里面的head标签没有加载。另一种解决方案是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>


值结果.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>

在此处输入图像描述

在此处输入图像描述

我希望这会有所帮助。

于 2013-06-22T19:28:59.253 回答