0

我正在使用 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例如，如果我单击 holland，则 url 变为 ），这就是我猜第二次单击时它起作用的原因。

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');
    });
}

最后一次编辑：作为最后一次编辑，我想指出，对于有同样问题的人，我遇到这么大问题的一个原因是，正如您在第一个代码片段中看到的那样，我在数据之前有我的脚本-角色=“页面”。并且在初始页面之后使用jquery，只有页面标签内的东西会在其余页面中执行。因此，由于 jquery 体系结构，代码必须进入第一个索引页面（无论何时）或数据角色“页面”之后的其他页面。

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

4

1 回答 1

0

我认为您可能不应该尝试在某种submit操作中处理此问题。实际上，您所谈论的只是执行按钮的单击处理程序。尝试在 a 内部进行form onsubmit可能会增加不必要的复杂性和潜在的跨浏览器问题。

尝试将您的提交按钮更改为普通button元素。这是您注册点击处理程序的地方。从<form onsubmit="">标签中删除处理程序。

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

我认为此时您也可以放弃，event.preventDefault()因为您实际上并不需要阻止简单按钮单击处理程序的默认设置。默认值正是您正在执行的操作！

于 2013-06-12T17:51:02.250 回答