2013-06-27 61 views
1

我相信我有解决我的问题,但我想确定。这是我有:如何防止在每次页面加载时执行此jQuery函数?

<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。这是函数:

$(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"); 
    }; 

}); 

每次加载页面,则执行该功能 - 显然,因为我禁用投入产生的问题。我的假设是,我可以像这样解决问题:

$(document).ready(function login() { 
    $('.login-form').submit(function() { 
    var formData = $(this).serialize(); 
    .post('whatever', formData,... 

我很好奇,是否有人对此有任何见解,以及为什么它正在对每个页面加载执行?具体来说,我是否需要修改表单动作属性,onSubmit等的不同实现?我假定浏览器只是看到文件并执行包含的功能。另外,我在chrome控制台中收到了交叉错误。 php文件是否需要与jQuery函数位于同一目录中?任何输入赞赏。

回答

4

的关键是在这里:

$(function login() { 
}); 

记住,jQuery是不是一种不同的语言 - 它只是已经定义了一些辅助功能的JavaScript。所以你打电话给$()函数,并传入一个函数作为参数。事实上,你命名的功能是无关紧要的 - 它仍然作为参数传递给$()

当您调用$()jQuery()函数并传入另一个函数时,它是定义文档就绪事件处理程序的快捷方式。所以你的代码真的是这样做的:

$(document).ready(function() { 
    var formData = $('#login-form').serialize(); 
    $("input").prop("disabled", true); 
    // the rest of your function here... 
}); 

......这使得它运行在每个页面加载。

如果你只是定义一个稍后会被调用的函数,那么没有理由把它包装在$()中。你可以这样定义你的功能:

function login() { 
    var formData = $('#login-form').serialize(); 
    $("input").prop("disabled", true); 
    // the rest of your function here... 
} 
相关问题