Javascript jQuery:submit上的动画有一半时间有效，另一半时间重定向到jQuery.min.js？
我有一个带有一些样式的基本登录页面，您将在示例中看到。最后，有一个jQuery脚本在加载下一页时制作1500毫秒的动画 我遇到了一个奇怪的错误，大约50%的时间，它会制作动画并加载下一个页面-但剩余的大约50%，它只会路由到/static/jquery.min.js文件并在浏览器中打开它（使用给定的URL路径）。我不是jQuery鲨鱼。有什么好处 示例代码，一个login.html文件：Javascript jQuery:submit上的动画有一半时间有效，另一半时间重定向到jQuery.min.js？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个带有一些样式的基本登录页面，您将在示例中看到。最后，有一个jQuery脚本在加载下一页时制作1500毫秒的动画 我遇到了一个奇怪的错误，大约50%的时间，它会制作动画并加载下一个页面-但剩余的大约50%，它只会路由到/static/jquery.min.js文件并在浏览器中打开它（使用给定的URL路径）。我不是jQuery鲨鱼。有什么好处 示例代码，一个login.html文件： <!DOCTYPE html> <html xmlns="http://www.w3.or
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='static/jquery.min.js'></script>
<link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="static/images/bg.jpg"/>
<meta charset="UTF-8">
<title>Title!</title>
<style>
// Lots of css for the login form
</style>
</head>
<body>
<div class="login">
<header class="login-header"><span class="text"><h4>Title!</h4></span><span class="loader"></span></header>
<form class="login-form" id="log-inform" action="/loginp" method="post">
<label><input class="login-input" type="text" name="username"/><h3>user</h3></label>
<label><input class="login-input" type="password" name="password"/><h3>password</h3></label>
<button class="login-btn" type="submit">login</button>
</form>
</div>
<script>
// jQuery function for animation after successful login
$('.login-input').on('focus', function() {
$('.login').addClass('focused');
});
function doOnSubmit(e) {
e.preventDefault();
$('.login').removeClass('focused').addClass('loading');
setTimeout(function(){
$('.login-form').submit();
},1500); // time in ms to do animation whilst loading the next page
$('.login').unbind('submit', doOnSubmit);
}
$('.login').on('submit', doOnSubmit);
</script>
</body>
</html>
标题
//登录表单有很多css
标题
用户
密码
登录
//成功登录后用于动画的jQuery函数
$（'.login input'）。在（'focus'，function（）上{
$（'.login'）.addClass（'focused'）；
});
功能提交（e）{
e、 预防默认值（）；
$（'.login'）.removeClass（'focused'）.addClass（'loading'）；
setTimeout（函数（）{
$（'.login form'）.submit（）；
}，1500）；//加载下一页时制作动画的时间（毫秒）
$（'.login'）.unbind（'submit'，doOnSubmit'）；
}
$（'.login'）。在（'submit'，doOnSubmit'）；
第二次编辑：可以关闭。它与此代码无关，而是从Java后端加载文件的权限。很抱歉没有看到任何可能会导致您描述的错误，但是您应该将submit事件附加到表单元素，而不是div，因为submit事件我在测试后编辑了一些信息。这只是第一次。这就好像它需要“打开”它来加载jquery，然后如果我再次尝试提交，动画就会工作。这很奇怪。你能详细说明一下吗？我不熟悉这里的术语。什么时候出现问题？页面加载？集中提交？可能您需要将代码包装在$（document）中。就绪（…）：@mvermand不需要，因为脚本标记位于正文的末尾。如果这只是一个例子，那么在真实的程序中可能不是这样吗？