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

Question

我有一个登录弹出窗口，它会在我的网站的每个页面上弹出。我想要做的事情是，一旦用户点击提交，就有一个用于处理该请求的jQuery代码所在的单个JS文件，并通过AJAX调用来验证数据库中的参数。

我能够弹出框弹出。和表单加载。我想我的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> 
     '; 
?> 

这里是problemio.js内容与jQuery来处理登录表单提交：

// 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; 
    }); 
}); 

Answer 1

两件事。首先，当您将上面的代码放入单独的JavaScript文件中时，请务必删除<脚本..>和</script> HTML标记。

接下来，改变下面一行：

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

若要改为说：

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

，然后在你的< form>标签中设置ID = “登录表单”。

Answer 2

您可以使用.submit()将处理程序附加到表单提交事件。首先，您需要通过ID选择您的表单：

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

Answer 3

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

Answer 4

如果您不确定，只需右键单击该网页并阅读其html代码即可。

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

而且还绑定的功能form.submit是不是提交按钮好得多。

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

Answer 5

如果您想为每个页面上提交不使用IDS处理click事件，你可以随时使用this关键字的点击事件，找到发送者，然后找到父form。