Question

控件没有传递给点击事件，所以任何人都可以建议下面的代码有什么问题，任何关于这个的教程都会有很大的帮助。

代码：

<html>
<head>
  <script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
   $("#submit").click(function(event)
{
    alert("hi");
    $.ajax({
   type    : "POST",
   url     : "https://xxxxx/xxx.php",
   data    : {"email": "jason.charity@icloud.com", "password": "people4455!",       "application":"rex"},
   success : function(response) {
     data = jQuery.parseJSON(response);
     console.log(data);
     }
  });
    </script>
</head>
<body>
<form id="myForm">
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>

Answer 1

两个问题：

您在代码末尾缺少});，因此语法错误。（我没有意识到，直到我通过http://jsbeautifier.org/运行您的代码，所以我没有在下面发布一个混乱。这显示了确保使用合理，一致的代码格式化的价值！）
（如果你解决了这个问题。）当你执行$("#submit")时，该元素尚不存在，因此与任何元素都不匹配。只需将HTML中的元素下面的移动到（这是generally the recommendation，将script放在结束</body>标记之前。

修复两者：

<html> <body> <form id="myForm"> <input type="submit" id="submit" value="submit"> </form> <script src="jquery-1.9.1.js"></script> <script type="text/javascript"> $("#submit").click(function (event) { alert("hi"); $.ajax({ type: "POST", url: "https://xxxxx/xxx.php", data: { "email": "jason.charity@icloud.com", "password": "people4455!", "application": "rex" }, success: function (response) { data = jQuery.parseJSON(response); console.log(data); } }); }); // <== This was the missing bit </script> </body> </html>

附注：

如果您的服务器使用正确的内容类型进行响应，则parseJSON处理程序中不需要success;如果服务器说它就是这样的话，jQuery会自动解析JSON。

使用doctype是一个非常非常非常好的主意。将<!doctype html>放在文档的顶部。

Answer 2

将您的功能包含在document.ready function：

中

$(document).ready(function(){
//your code here
});

或者，

$(function(){
//your code here
});

而且你在最后一行代码中遗漏了});，这会引起@ T.J提到的错误。克劳德

Answer 3

您也可以使用推荐的方法，即文档上的事件委派

$(document).on("click","#submit",function(event)
{
    alert("hi");
    $.ajax({
   type    : "POST",
   url     : "https://xxxxx/xxx.php",
   data    : {"email": "jason.charity@icloud.com", "password": "people4455!",       "application":"rex"},
   success : function(response) {
     data = jQuery.parseJSON(response);
     console.log(data);
     }
  });
});

Answer 4

点击进入

$(document).ready(function(){
  $("#submit").click(function(event)
  {
    alert("hi");
    $.ajax({
    type    : "POST",
    url     : "https://xxxxx/xxx.php",
    data    : {"email": "jason.charity@icloud.com", "password": "people4455!",                           "application":"rex"},
    success : function(response) {
    data = jQuery.parseJSON(response);
  console.log(data);
   }
  });
});

Answer 5

<script type="text/javascript">
 $(document).ready(function(){
   $("#submit").click(function(event){
     alert("hi");
     $.ajax({
       type    : "POST",
       url     : "https://xxxxx/xxx.php",
       data    : {"email": "jason.charity@icloud.com", 
       "password":      "people4455!",       "application":"rex"},
       success : function(response) {
         data = jQuery.parseJSON(response);
         console.log(data);
       }
     });
   });
 });
</script>

你错过了关闭＆＃34;}）;＆＃34;，试试这个脚本。

没有进入点击功能

5 个答案: