【发布时间】：2014-06-02 18:41:50
【问题描述】：
我正在使用 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：第二次访问该页面时，阻止默认设置似乎不起作用。相反，它只是重新加载页面（并且 url 变为 http://localhost/arenaapp/www/index.html?country=holland ，例如，如果我点击 holland ），这就是我猜第二次点击时它起作用的原因。
编辑2： 我也会在这里发布您到达的页面的代码： 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');
});
}
最后一次编辑：作为最后一次编辑，我想指出，对于有同样问题的人，我遇到如此大问题的一个原因是，正如您在第一个代码 sn-p 中看到的那样，我有我在 data-role="page" 之前的脚本。并且在初始页面之后使用jquery，只有页面标签内的东西会在其余页面中执行。因此，由于 jquery 体系结构，代码必须进入第一个索引页面（无论何时）或数据角色“页面”之后的其他页面。
【问题讨论】：
-
是
var input = $('input:radio[name=counrty]:checked').val();国家还是名字是国家？ -
不确定是否是这个问题，但您可以尝试在
event.preventDefault();之后添加event.stopPropagation(); -
不确定是否相关，但您在这里拼错了“国家”：
input:radio[name=counrty]:checked -
感谢您的回复！那以后会给我带来麻烦。但这不是问题所在。 event.stopPropagation 也没有解决。