#javascript #function #jquery-mobile #button #redirect
#javascript #функция #jquery-mobile #кнопка #перенаправление
Вопрос:
Я новичок в технологии Jquery Mobile и должен признать, что в поведении этого фреймворка есть некоторые мелочи, которые я пока не понимаю. Я разрабатываю приложение для планшета, используя Cordova 2.9.1 и jQuery Mobile 1.2.0 (моя версия обычного jQuery 1.8.2).
В принципе, у меня есть многостраничный HTML-файл (2 страницы). В двух из них я использую простую форму и простую кнопку для проверки входных данных.
HTML-код — index.html
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>MyApp</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="index">
<div data-role="content">
<form name="login_form">
<div align="center">
<input type="text" name="username" id="username"/>
<input type="password" name="password" id="password"/>
<br/>
<button data-role="button" data-inline="true" data-theme="c" class="connection_button">Se connecter</button>
<br/><br/>
<a class="force-reload" href="#mdp_oublie" data-role="button" data-inline="true" data-theme="c" data-transition="slide">Mot de passe oublié</a>
</div>
</form>
</div>
</div>
<div data-role="page" data-theme="c" id="mdp_oublie">
<div data-role="content">
<form name="email_form">
<div align="center">
<input type="email" name="email" id="email"/>
<button data-role="button" data-inline="true" data-theme="c" class="email_button" onclick="email_recovering(this)">Valider</button>
</div>
</form>
</div>
</div>
</body>
У меня возникли некоторые проблемы с запуском события нажатия кнопки. После нескольких исследований я пришел к использованию такого метода в своей index.js файл.
Код Javascript — index.js
$('[data-role="page"]').live('pageshow', function ()
{
$(document).on('click', '.connection_button', function (e)
{
if(e.handled !== true)
{
var username = $('#username').val();
var password = $('#password').val();
if(username == "a" amp;amp; password == "b")
alert("OK");
else
alert("KO");
e.handled = true;
}
});
});
Проблема в том, что при нажатии кнопки «Se Connecter» функция выполняется так, как должна, но jQuery затем перенаправляет меня на страницу индекса (первую). Я не понимаю, почему…
Мои два вопроса :
-
Является ли способ, которым я вызываю свою функцию connection_button, хорошим? Я несколько раз пробовал $ (document).метод ready() {}); и у меня это не работает. У вас есть что-нибудь получше?
-
Есть ли у вас какие-либо идеи о перенаправлении на страницу индекса при вызове функции?
Я надеюсь, что я выразился максимально ясно. Спасибо.
Комментарии:
1. Для идентификации этой кнопки следует использовать идентификатор, а не класс, если только вы не планируете иметь их много… На вашем месте я бы использовал <button onclick=your_function()> и использовал бы только your_function в js-коде. Для обработки щелчка большего не требуется.
Ответ №1:
Правильная идея для кнопок (по крайней мере, для jQuery Mobile 1.2.0) — использовать <a href="#"> ссылки:
<a href="#" data-role="button" data-inline="true" data-theme="c" id="connection_button">Se connecter</a>
таким образом, не происходит перенаправления на другие страницы. Я исправил ваш JavaScript и создал JSFiddle с вашим кодом:
$(document).on("pageshow", "[data-role=page]", function(event, ui)
{
$(document).on("click", "#connection_button", function(event)
{
var username = $('#username').val();
var password = $('#password').val();
if(username == "a" amp;amp; password == "b")
alert("OK");
else
alert("KO");
});
$(document).on("click", "#email_button", function(event)
{
email_recovering(this);
});
});
Комментарии:
1. Спасибо за эти пояснения. Я применил их, и проблема была той же самой. После некоторых исследований я наконец нашел, каким должно быть решение: похоже, что PhoneGap выходит из строя на iOS начиная с версии 2.7.0, возвращая ошибку CDVWebViewDelegate: Навигация началась при state = 1 при попытке перейти к привязке на той же странице. Дополнительная информация здесь: issues.apache.org/jira/browse/CB-3530 Код, который вы загрузили в JSFiddle, в порядке и работает хорошо, но когда я попробовал его в своем проекте, у меня возникла ошибка PhoneGap. В любом случае, спасибо, ваши советы замечательны.