javascript - 即使使用 e.preventDefault 后提交表单也会刷新页面

Question

我想在提交表单后进行一些操作。但是单击“提交”按钮后页面会重新加载。我已经使用了 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();
        });

Answer 1

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

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