如何防止此jQuery函数在每次页面加载时执行? [英] How can I prevent this jQuery function from being executed on every page load?
问题描述
我相信我有解决问题的方法，但是我想确定.这就是我所拥有的:
I believe I have a solution to my problem, but I want to be sure. This is what I have:
<html>...
<body>...
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/respond.min.js"></script>
<script type="text/javascript" src="../JS/jquery.min.js"></script>
<script type="text/javascript" src="../JS/validate.js"></script>
<script type="text/javascript" src="../JS/jQueryCalls.js"></script>
...
<form name="login-form" class="login-form" method="post" onSubmit="login()">
<div class="header">
<h1>Sign In</h1>
</div>
<div class="content">
<input type="hidden" name="siteToken" value="$token" />
<input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
<div class="user-icon"></div>
<input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
</div>
</form>
现在onSubmit链接到jQuery函数的是一个外部文件jQueryCalls.js.这是功能:
Now onSubmit links to a jQuery function is an external file, jQueryCalls.js. This is the function:
$(function login() {
var formData = $('#login-form').serialize(); //Grab all submission data from login form
$("input").prop("disabled", true); //Disable inputs for the duration of the post
var request = $.post('E:\Additional Programs\xampp\htdocs\Vista_Ridge_Territory_System\PHP\Scripts\VRC_LoginProcess.php', formData, loginMessage);
//Handle server-side response
function loginMessage(data) {
$('.header').append("nada");
};
});
每次加载页面时，都会执行此功能-很明显，由于我禁用了输入，因此会产生问题.我的假设是，我可以使用以下方法解决问题:
Every time the page loads, this function is executed - obviously that creates an issue since I disable inputs. My assumption is that I can fix the problem with something like this:
$(document).ready(function login() {
$('.login-form').submit(function() {
var formData = $(this).serialize();
.post('whatever', formData,...
我很好奇是否有人对此有任何见解，以及为什么每次加载页面时都会执行它?具体来说，我是否需要修改表单操作属性，onSubmit上的其他实现等?我认为浏览器只是在查看文件并执行包含的功能.另外，我在Chrome控制台中收到跨源错误. php文件是否需要与jQuery函数位于同一目录中?任何输入表示赞赏.
I am curious as to whether anyone has any insight on this, and why it is being executed on each page load? Specifically, do I need to modify form action attribute, different implementation on onSubmit, etc? I assume that the browser is simply seeing the file and executing the containing functions. Also, I am receiving a cross origin error in chrome console. Does the php file need to be in the same directory as the jQuery function? Any input is appreciated.
推荐答案
关键在这里:
$(function login() {
});
请记住，jQuery不是另一种语言-它只是具有一些帮助函数的javascript.因此，您要调用$()函数，并将函数作为参数传入.您为函数命名的事实是无关紧要的-它仍作为参数传递给$().
Remember that jQuery is not a different language - it's just javascript with some helper functions already defined. So you're calling the $() function, and passing in a function as an argument. The fact that you're naming the function is irrelevant - it's still getting passed as a parameter to $().
当调用$()或jQuery()函数并传递另一个函数时，这是定义文档就绪事件处理程序的快捷方式.因此，您的代码与执行此操作实际上是相同的:
When you call the $() or jQuery() function and pass in another function, it's a shortcut for defining a document-ready event handler. So your code is really the same as doing this:
$(document).ready(function() {
var formData = $('#login-form').serialize();
$("input").prop("disabled", true);
// the rest of your function here...
});
...这导致它在每次页面加载时都运行.
...which causes it to run on every page load.
如果您只是定义一个稍后要调用的函数，则没有理由将其包装在$()中.您可以这样定义函数:
If you're just defining a function that will be called later, there's no reason to wrap it in $(). You can define your function like this instead:
function login() {
var formData = $('#login-form').serialize();
$("input").prop("disabled", true);
// the rest of your function here...
}
这篇关于如何防止此jQuery函数在每次页面加载时执行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
