提交按钮不会触发表单提交

Question

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

当我点击“提交”按钮时，它会保持按下状态，但不会提交表单。但是，如果通过其他方式提交表单，例如按键盘上的Enter或移动Safari（iDevice）上的GO，一切正常。我正在使用jQuery mobile btw。

有人能看出为什么会出现这种情况吗？

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>。

提交按钮实际上应该是input <{1}}

标签