如何将jQuery代码放入一个文件中,该文件将被所有页面引用

How to put a jQuery code into one file which will be referenced by all pages?

本文关键字:文件 引用 代码 jQuery 一个      更新时间:2023-09-26

我有一个登录弹出,将弹出在我的网站的每一页。我想做的是,一旦用户单击提交,就有一个JS文件,其中处理该请求的jQuery代码存在,并进行AJAX调用以验证DB中的参数。

我可以让弹出框弹出。然后表单就加载了。我认为我的jQuery代码将生活在一个单独的导入文件,看起来像这样:

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var some_params= $("#param").val();
        var dataString = 'Some url to send to ajax';
        if( params validated ok )
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();    
                }
            });
        }
        return false;
    });
});
</script>

所以我的问题是如何使它只在提交正确的表单时被调用?表单将有一些id="some_name",但我真的不明白如何使这个jQuery代码得到执行,只有当表单元素被调用。

下面是我调用的要在弹出窗口中显示的表单:

<?php
         echo '<div id="login_div">
         <form id="login_form" method="post" action="">
         <p>
             <label for="name"><span>Your Email:</span></label> <input type="text" name="email" />
         </p>
         <p>
             <label for="name"><span>Your Password:</span></label> <input type="password" name="user_pass">
         </p>
         <p>
            <input type="submit" value="Log In"  />
         </p>
         </form>
         </div>

<p>
    <a href="http://www.problemio.com/auth/create_profile.php">Create Account</a> | <a href="http://www.problemio.com/auth/forgot_password.php">Reset Pass</a>
</p>
         ';
?>
下面是用jQuery处理登录表单的problem .js内容提交:
// javascript library
// login_form
$(function()
{
    $("#login_form input[type=submit]").click(function()
    {
        console.log("test");
        alert("1");
//      var name = $("#problem_name").val();
//      var problem_blurb = $("#problem_blurb").val();
//      var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;
//      if(name=='' || problem_blurb == '')
//      {
//          $('.success').fadeOut(200).hide();
//          $('.error').fadeOut(200).show();
///     }
//      else
//      {
//          $.ajax({
//              type: "POST",
//              url: "/problems/add_problem.php",
//              dataType: "json",
//              data: dataString,
//              success: function(json)
//              {
//                  $('.success').fadeIn(200).show();
//                  $('.error').fadeOut(200).hide();
//                  
///                 // Here can update the right side of the screen with the newly entered information
//                  //alert (json);
//          
//                  new_string = "<h2>Most Recently Added Problems</h2>";
                    // Have to figure out how to make this work with the DOM.
//              }
//          });
//      }
        return false;
    });
});

两件事。首先,当您将上述代码放入单独的javascript文件中时,请确保删除了<脚本。>和 HTML标签。

接下来,修改以下行:

$("input[type=submit]").click(function()

改为:

$("#loginform input[type=submit]").click(function()

然后在你的

标签上设置id="loginform"

您可以使用.submit()将处理程序附加到表单提交事件。首先,您需要通过id:

选择表单
$("#some_form_id").submit(function() {
    // the code you have in the click event above goes here.
});

您可以指定要触发jquery的表单。http://api.jquery.com/submit/

如果您不确定,只需右键单击此网页并阅读其html代码。

<script type="text/javascript" src="some.js"></script>

并且,将函数绑定到表单。提交比提交按钮好得多。

$('formid').submit(function(){blablabla;return false;})

如果您想在不使用id的情况下处理页面上的每个提交的单击事件,您可以始终在单击事件中使用this关键字来查找发件人,然后找到父form