我正在通过 Parse.com JavaScript 开发一个网站。我正在登录页面上工作，发现了这个不错的模板:http://designscrazed.org/css-html-login-form-templates/
但是，当我尝试修改此页面的提交部分以通过 Parse.com 进行处理时，页面会在进行 Parse.com 事务之前自动刷新。我知道 JavaScript 文件已被正确引用。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prindle Login</title>
<!-- PARSE-->
<link href="dist/css/login-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="dist/js/parse/login-js.js"></script>
</head>
<body>
<div class="login-card">
<h1>Prindle Login</h1><br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help">
<a href="#">Register</a> • <a href="#">Forgot Password</a>
</div>
</div>
</body>
</html>
JS:
// dynamically adding to a document: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1
$(document).ready(function() {
alert('hello');
Parse.$ = jQuery;
Parse.initialize("APP ID", "JS ID")
});
// called when the user clicks the log in button
$('#prindle_log_on').on("click",function(e) {
e.preventDefault();
alert("form has been submitted.");
// perform onclick
// get the values of the input fields for username and password
var username = $('#prindle_log_on_username').val();
var password = $('#prindle_log_on_password').val();
// try to log in
Parse.User.logIn(username, password,
{
success: function(user) {
// Do stuff after successful login.
alert('user found');
},
error: function(user, error)
{
// The login failed. Check error to see why.
alert('log in failed');
}
});
});
我从来没有收到气球说“表单已提交”。帮忙？
编辑:(感谢穆格)
<div class="login-card">
<h1>Prindle Login</h1>
<br>
<form id="form">
<input id="prindle_log_on_username" type="text" name="user" placeholder="Username">
<input id="prindle_log_on_password" type="password" name="pass" placeholder="Password">
<input id="prindle_log_on" type="submit" class="login login-submit" value="Log In">
</form>
<div class="login-help"> <a href="#">Register</a> • <a href="#">Forgot Password</a>
</div>
</div>
$(document).ready(function () {
$('#prindle_log_on').on("click", function (e) {
e.preventDefault();
alert("form has been submitted.");
});
});
最佳答案
将点击处理程序放在 $(document).ready 中，因为在正文渲染之前不会找到 $('#prindle_log_on')。
关于javascript - HTML 自动刷新，尽管 jQuery 拦截，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30005786/