我是 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" && password == "b")
alert("OK");
else
alert("KO");
e.handled = true;
}
});
});
问题是，当单击“Se Connecter”按钮时，该函数会按应有的方式执行，但 JQuery 然后将我重定向到索引页面(第一个页面)。我不明白为什么...
我的两个问题是:
我调用 connection_button 函数的方式好吗？我尝试了几次 $(document).ready() {});方法，它对我不起作用。你还有更好的吗？
您知道调用函数后重定向到索引页吗？
我希望我已经尽可能清楚地表达了。 谢谢。
最佳答案
对按钮(至少对于 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" && password == "b")
alert("OK");
else
alert("KO");
});
$(document).on("click", "#email_button", function(event)
{
email_recovering(this);
});
});
关于javascript - Jquery mobile - 在按钮单击事件后返回索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24571858/