Question

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

我正在编写一个简单的（目前为止）应用程序，允许用户在表单上选择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>

这是valuresult.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模拟器上没有任何反应。

我已经玩了很长一段时间了，指的是其他帖子，文档等......但我似乎无法让它工作。希望我只是错过了一些愚蠢的东西。

感谢任何帮助。非常感谢你提前！

Answer 1

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

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

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

在第二页中，我修改了您的script并将其放入jQM page。原因是当通过Ajax加载jQM页面时，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>

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

我希望有所帮助。

jQuery Mobile点击按钮但没有任何反应

1 个答案: