Ajax提交后第二次提交页面自动刷新，e.preventDefault()无效如何解决

问题核心原因 #

你代码中的事件绑定逻辑存在嵌套错误，导致表单提交事件被重复注册：

• 你将$('#form').submit()、$('#delform').submit()的事件绑定逻辑写在了对应按钮的click事件回调内，每次点击按钮都会给表单新增一次提交事件监听器。第一次点击时仅绑定1次监听器，e.preventDefault()生效可以阻止刷新；第二次点击时已经累计绑定了2个监听器，执行逻辑混乱导致默认提交行为未被正确拦截，触发页面刷新。
• 另外你通过loadNewCourse()、loadDelTable()动态替换了页面内容，如果#form、#delform属于动态加载的内容，直接绑定的事件会在内容刷新后失效，需要改用事件委托保证绑定永久生效。

修复方案 #

直接移除嵌套的click事件监听，直接绑定表单的submit事件即可，动态内容则改用事件委托绑定：

$(document).ready(function(){
    loadNewCourse();
    loadDelTable();

    // 直接绑定表单提交事件，不需要套在submit按钮的click事件里
    $('#form').submit(function(e){ 
        e.preventDefault();
        var in_arr = [],
            name = "<?php echo $_SESSION['name']?>",
            email = "<?php echo $_SESSION['email']?>",
            regno = "<?php echo $_SESSION['regno']?>",
            level = "<?php echo $_SESSION['level']?>",
            dept = "<?php echo $_SESSION['dept']?>",
            semester = "<?php echo $_SESSION['semester']?>";
        $('.inChk').each(function(i){
            if($(this).is(':checked')){
                in_arr.push($(this).val());
            }
        });
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            cache: false,
            async: false,
            data: {
                post_inId : in_arr,
                name : name,
                email : email,
                regno : regno,
                level : level,
                dept : dept,
                semester : semester
            },
            success: function(data){
                loadNewCourse();
                loadDelTable();
                $('body').removeAttr('style');
                $('#regModal').removeAttr('style');
                $('.modal-backdrop').remove();
                swal({
                    position: "top-end",
                    type: "success",
                    title: "Registration successful",
                    showConfirmButton: false,
                    timer: 2000
                })
            },
            error: function(data){
                swal("Oops...", "Registration failed.", "error");
            }
        });
    });

    // 删除逻辑同理，直接绑定delform的submit事件
    $('#delform').submit(function(e){
        e.preventDefault();
        var id_arr = [],
            regno = "<?php echo $_SESSION['regno']?>",
            level = "<?php echo $_SESSION['level']?>";
        $('.delChk').each(function(i){
            if($(this).is(':checked')){
                id_arr.push($(this).val());
            }
        });
        swal({
                title: "Are you sure you want to delete selected courses?",
                text: "You can add these courses by registering again!",
                type: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, delete!",
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                closeOnConfirm: false
            },
            function(isConfirm){
                if(isConfirm){
                    $.ajax({
                        type: "POST",
                        url: "submit.php",
                        data: {
                            post_id : id_arr,
                            regno : regno,
                            level : level
                        },
                        cache: false,
                        async: false,
                        success: function(data){
                            loadDelTable();
                            loadNewCourse();
                            swal({
                                    position: "top-end",
                                    type: "success",
                                    title: "Delete successful",
                                    showConfirmButton: false,
                                    timer: 2000
                                })
                        },
                        error: function(data){
                            swal("Oops...", "Delete failed.", "error");
                        }
                    });
                }else{
                    swal("Oops...", "Delete failed", "error");
                }
        });
        return false;
    });

    function loadNewCourse(){
        $.ajax({
            url: 'processReg.php',
            type: 'POST',
            cache: false,
            async: false,
            data: {
                loadit : 1
            },
            success: function(disp){
                $("#reveal").html(disp).show();
            }
        });
    }
    
    function loadDelTable(){
        $.ajax({
            url: 'delete_tbl.php',
            type: 'POST',
            cache: false,
            async: false,
            data: {
                loadDel : 1
            },
            success: function(deldisp){
                $("#showRegtbl").html(deldisp).show();
            }
        });
    }
});

如果你的表单是在动态加载的内容里，把上面的表单绑定逻辑改成事件委托写法即可：

// 把原来的 $('#form').submit(function(e){...}) 改成
$(document).on('submit', '#form', function(e) {
    // 原有逻辑不变
})

// 删除表单同理
$(document).on('submit', '#delform', function(e) {
    // 原有逻辑不变
})

内容的提问来源于stack exchange，提问作者Ndongesit Edet