使用Jquery提交表单，按钮可以工作，但不能按enter键

Question

我有一点jquery，它正在为我提交一个电子邮件注册表单。当用户点击按钮时，一切正常，但当按回车键时，表单似乎是试图通过html提交，而不是通过jquery，您将被带到表单应该发布的位置。我试着用.submit代替.click，但似乎行不通

$('#email-signup-button').click(function () {
        var email = $('#email-address').val();

        // Check to see if field is blank
        if (email.length < 1) {
            errorLog += ('Please provide an email address.');
            errorCount++;
        }

        // If field is email address, check w/ regex
        if (email.match(emailRegex) == null) {
            if (errorCount == 0) {
                errorLog += ('Email address is invalid.\nPlease verify.');
                errorCount++;
            }
        }

        if (errorCount > 0) {
            alert(errorLog);
            errorCount = 0;
            errorLog = "";
        }
        else {
            $.post("/Home/AddEmail", { emailAddress: email });

            alert('Thank you for signing up!');
            $('#email-address').val("");
            $('#email-signup').hide();
            $('.lb_overlay').hide();
        }

        return false;
    });
}


        <div id="email-signup">
            <h2>
                Content Phrase
            </h2>
            <div class="email-deals-close-button">
            </div>
            <p>
                More Content</p>
            <form action="/Home/AddEmail" class="clearfix" method="post">
            <p class="sign-up">
                <label class="placeholder" for="email-address">
                    some@email.com</label>
                <input type="text" id="email-address" name="email-address" value="" />
            </p>
            <button id="email-signup-button" type="button" class="green-action-button">
                Submit</button>
            </form>
        </div>

Answer 1

电子邮件注册按钮是否是表单的提交按钮(即type="submit)？如果不是，这应该是为了让它工作。如果您不希望这样，您可以在窗口上设置一个事件来捕获enter，并将其定向到该按钮单击事件：

 $(window).bind('keypress', function(e){
   if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
     $(#email-signup-button").click();
     e.preventDefault();
   }
 });

(code source)

还有一个要注意的地方是潜在的名称冲突错误，这些错误可能会导致令人困惑的问题：

表单及其子元素不应使用与表单属性(如提交、长度或方法)冲突的输入名称或ids。名称冲突可能导致令人困惑的失败。有关规则的完整列表以及检查您的标记是否存在这些问题，请参阅DOMLint。

(jQuery docs)

最好找出导致提交不起作用的原因并使用它。

Answer 2

您应该附加到表单本身的提交事件，而不是按钮的单击。

 $("#formid").submit(//your function here);

Answer 3

您已将按钮类型设置为按钮。如果你想绑定到一个提交事件，你需要你的按钮作为输入，并且它的类型是type="submit"。