Question

我正在开发一个带有jquery / phonegap的应用程序。我有一个页面，您可以选择一个国家/地区。基于此，您将能够获得不同的列表。但您也可以返回此设置页面并更改国家/地区。当你开始时，点击就像它应该的那样。但是当您返回设置并尝试更改国家/地区时，您必须单击两次。可能很容易解决？有人有什么想法吗？

<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
        function ProcessC(){
       console.log('test');
        var input = $('input:radio[name=country]:checked').val();
        if (input =='belgium' ) {
            window.localStorage.setItem("country", "Belgium");
            document.location.href = "listarenas.html";
        } else if (input =='holland') {
            window.localStorage.setItem("country", "Holland");
            document.location.href = "listarenas.html"; }
        else {
            window.localStorage.setItem("country", "all");
            document.location.href = "listarenas.html";
        }
    }

</script>
</head>

<body>

<div data-role="page" id="countryPage">

    <div data-role="header" data-position="fixed">
        <h1>Choose Country</h1>
    </div>

    <div data-role="content">
         <form action="" data-ajax="false" id="countryp">
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Choose a country:</legend>
                <input type="radio" name="country" id="all" value="all" checked="checked">
                <label for="all">All</label>

                <input type="radio" name="country" id="be" value="belgium">
                <label for="be">Belgium</label>

                <input type="radio" name="country" id="nl" value="holland">
                <label for="nl">Holland</label>
            </fieldset>
         </div>
         <div data-role="fieldcontain">
            <input type="button" value="Go!" onclick="ProcessC();" />
         </div>
         </form>


    </div>      

</div>


<script src="js/arenalist.js"></script>
<script src="js/arenadetails.js"></script>


</body>

</html>

EDIT1：第二次进入页面时，似乎防止默认不起作用。相反，它只是重新加载页面（并且网址变为http://localhost/arenaapp/www/index.html?country=holland，例如，如果我点击荷兰），这就是为什么当你点击我猜第二次时它的工作原理。

EDIT2：我会在这里发布您到达的页面代码： listarenas.html

<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
 <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" /> 
 <link rel="stylesheet" href="css/styles.css" /> 
</head>

<body>

<div id="ListArenasPage" data-role="page">

    <div data-role="header" data-position="fixed">
    <a href='index2.html' class='ui-btn-left' data-icon='settings' data-theme="a" >Countries</a>
        <h1>The Arena App</h1>
    </div>

    <div data-role="content">
         <ul id="arenaList" data-role="listview" data-filter="true" data-filter-placeholder="Filter arenas..."></ul>
    </div>      

</div>

 <script src="js/jquery-1.9.1.min.js"></script> 
 <script src="js/jquery.mobile-1.3.1.min.js"></script>
 <script src="js/arenalist.js"></script>
 <script src="js/arenadetails.js"></script> 


</body>

</html>

JS文件是arenalist.js：

var serviceURL = "http://localhost/arenaapp/services/";

var arenas;

$('#ListArenasPage').on('pageshow', function(event) {
    getarenaList();
});

function getarenaList() {
    var country = window.localStorage.getItem("country");
    $.getJSON(serviceURL + 'getarenas.php?id=' + country, function(data) {
        $('#arenaList li').remove();
        arenas = data.items;
        $.each(arenas, function(index, arena) {
            $('#arenaList').append('<li><a href="arenaDetails.html?id=' + arena.id + '">' +
                    '<img src="pics/' + arena.picture + '"/>' +
                    '<h4>' + arena.arenaName + '</h4>' + '<p id="category">Club:' + arena.arenaClub + '</p>' +
                    '<p>Capacity:' + arena.arenaCapacity + '</p>' +
                    '<span class="ui-li-count">' + arena.id + '</span></a></li>');
        });
        $('#arenaList').listview('refresh');
    });
}

最后编辑：作为最后一次编辑，我想指出，对于遇到同样问题的人来说，我遇到如此大问题的原因之一就是你可以在第一个代码片段中看到，我有我的脚本在data-role =“page”之前。并且在初始页面之后使用jquery，只有页面标记内的内容将在其余页面中执行。因此，由于jquery体系结构，代码必须位于第一个索引页面（其中）或数据角色“页面”之后的其他页面中。

阅读本文：https://stackoverflow.com/a/8724964/2466991

Answer 1

我认为您可能不应该尝试在submit类型的操作中处理此问题。你真正谈论的就是执行一个按钮的点击处理程序。试图在form onsubmit内部进行此操作可能会增加不必要的复杂性和潜在的跨浏览器问题。

尝试将提交按钮更改为普通button元素。您可以在此处注册Click处理程序。从<form onsubmit="">标记中删除处理程序。

<input type="button" value="Go!" onclick="ProcessC();" />

我认为此时您可能会删除event.preventDefault()，因为您实际上并不需要阻止简单按钮单击处理程序的默认设置。默认正是您正在做的事情！

初始点击后，我必须单击两次才能再次触发该按钮

1 个答案: