Я разрабатываю приложение с 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, например, если я нажму на Голландию), и именно поэтому он работает, когда вы нажимаете второй раз, когда я думаю.
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>
И arenalist.js файл 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');
});
}
ПОСЛЕДНЕГО EDIT: как последнее изменение, я хотел бы указать, для людей с той же проблемой, что одной из причин, по которым у меня были такие большие проблемы, было то, что, как вы можете видеть в первом фрагменте кода, у меня был мой скрипт перед тем, роль = «страница». И с jquery после начальной страницы в остальной части страницы будут выполняться только те объекты в теге страницы. Поэтому код должен идти на первой странице индекса (где бы то ни было) или на других страницах после «страницы» роли данных из-за архитектуры jquery.
Прочитайте это: https://stackoverflow.com/a/8724964/2466991
Это 'var input = $ ('input: radio [name = countryrty]: checked'). Val();' ** concrty ** или имя ** страна **? –
Не уверен, что это проблема, но вы можете попробовать добавить 'event.stopPropagation();' after' event.preventDefault(); ' – Dropzilla
Не уверен, что это связано, но вы опечатали« страну »здесь:' input: radio [name = countryrty]: checked' –