Question

我有一个基本的登录页面，其中包含“登录”和“密码”输入以及“login_button”提交。由于我没有找到的原因，我无法在登录login_button时触发ajax请求我使用jquery：

提出了以下（简单）代码

$(document).ready(function(){
  // Perform login
  function log_in(login,password){
    alert("log_in"); // this is never triggered
    $.ajax({
    url : '/api/login',
    type : 'GET',
    dataType : 'json',
    data: 'login=' + login + '&password=' + password,
    success : function(data, status, jqXHR){
      alert("success");
      alert(JSON.stringify(data));
      alert(JSON.stringify(status));
      alert(JSON.stringify(jqXHR));
    },
    error : function(jqXHR, status, err){
      alert("error");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
      alert(JSON.stringify(err));
    },
    complete : function(jqXHR, status){
      alert("complete");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
    }
    });
  }

  // Add event on login button
  $('#login_button').click(function(){
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
  });
});

知道我缺少什么吗？

修改

表单是一个简单的引导程序形式：

<form class="form-signin">
  <h2 class="form-signin-heading">Please sign in</h2>
  <input id='email' type="text" class="input-block-level" placeholder="Email address">
  <input id='password' type="password" class="input-block-level" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
  </label>
  <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>
</form>

编辑2

添加'return false;'实际上修复了这个问题：

// Add event on login button
$('#login_button').click(function(){
  alert("click"); // this is triggered
  login    = $('#email').val();
  password = $('#password').val();
  log_in(login, password);
  return false;
});

Answer 1

如果你想保留本机组合（没有JS，但提交按钮），你必须在表单中添加动作并命名输入

<html>
    <form class="form-signin" action="/api/login" method="GET">
        <input name="email" id='email' type="text" class="input-block-level" placeholder="Email address">
        <input name="password" id='password' type="password" class="input-block-level" placeholder="Password">
        <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>

    </form>
</html>

对于支持JS的浏览器，你必须杀死原生提交

$('#login_button').click(function(e){
    e.preventDefault();
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
 });

Answer 2

您应该在脚本中添加return false;或preventDefault();，以防止页面重新加载，因为表单提交默认情况下会这样做。

这两者之间的区别在于你可以在处理程序的开头添加preventDefault();，这肯定会有效，而在某一点上，解释器可能无法在最后返回false;。

无法使用jquery触发对click事件的操作

2 个答案: