即使在使用 e.preventDefault 后提交表单也会刷新页面答案

【问题标题】：Submitting form refreshing the page even after using e.preventDefault即使在使用 e.preventDefault 后提交表单也会刷新页面
【发布时间】：2016-03-20 16:24:30
【问题描述】：

我想在提交表单后做一些操作。但是点击“提交”按钮后页面会重新加载。我已经使用了 evt.preventDefault() 仍然没有停止。

    <form class="user-info-form">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="create-user-label">User Details</h4>
                    <div class="error-message"></div>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="user-email" class="control-label">Email:</label>
                        <input type="email" class="form-control" id="user-email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="user-first-name" class="control-label">First Name:</label>
                        <input type="text" class="form-control" id="user-first-name" name="first_name" required>
                    </div>
                    <div class="form-group">
                        <label for="user-last-name" class="control-label">Last Name:</label>
                        <input type="text" class="form-control" id="user-last-name" name="last_name" required>
                    </div>
                    <div class="form-group">
                        <label for="user-password" class="control-label">Password:</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="user-confirm-password" class="control-label">Confirm Password:</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirm-password" required>
                    </div>
                    <input type="hidden" name="id" class="uuid" />

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                </div>
            </div>
        </form>

而 JS 代码是 -

$(".submit-btn").submit(function (evt) {
            evt.preventDefault();
            oThis.onSubmitBtn();
        });

【问题讨论】：

首先：你要提交表单，而不是按钮，所以你需要去：$(".user-info-form").submit(....)，然后你的防止应该工作。第二：在您的代码中，不清楚 oThis 是什么。如果表单仍然提交，则通常是 javascript 错误。

标签： javascript jquery

【解决方案1】：

您应该将submit 函数应用于您的form 标记，而不是您的提交按钮。

$(".user-info-form").submit(function (evt) {
        evt.preventDefault();
        oThis.onSubmitBtn();
    });

【讨论】：