提交按钮未触发表单提交

Question

我有这个 html 表单，它的提交按钮有一些奇怪的行为。

当我单击“提交”按钮时，它一直处于按下状态，但没有提交表单。但是，如果表单是通过其他方式提交的，比如在键盘上按 Enter，或者在 Mobile Safari (iDevice) 上按 GO，一切正常。我正在使用 jQuery 移动顺便说一句。

谁能明白为什么会这样？

HTML

<div class='login' id='login'>
    <div class='login-header'>Please Login</div>
    <div class='alert-error' id='login-error' style='display:none;'>
      Please check your username and password and try again.
    </div>

    <form id='login_form'>
      <br>
      <p class='label'>Username</p>
      <input type='text' name='username'>
      <p class ='label'>Password</p>
      <input type='password' name='password'>
      <button type='submit' data-theme='a' id='login-button'>Login</button> 
    </form>
  </div>

JS

$('#login_form').submit(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var serializedFormData = $(this).serialize();

        // blah blah ajax form submit
        });
    });

编辑

看来我可以通过切换以下行来解决我的问题：

<button type='submit' data-theme='a' id='login-button'>Login</button> 

与

<input type='submit' value='Submit'>.

任何知道这为什么奏效的人仍有待获得声誉。

Answer 1

尝试删除 e.preventDefault();看看按钮是否工作。

Answer 2

试试

  $('#login_button').click(function(e) {
    e.preventDefault();

    var serializedFormData = $('#login_form').serialize();

    // blah blah ajax form submit
    });
});

这就是我使用 ajax 提交表单的方式，按下回车键仍然可以正常工作

Answer 3

没有<button type="submit">Submit me</button>。

提交按钮实际上应该是带有type="submit"的input标签