类型错误: e.preventDefault 不是一个函数

TypeError: e.preventDefault is not a function

本文关键字:一个 函数 错误 preventDefault 类型      更新时间:2023-09-26

我是javascript和jquery的新手。我在此代码中使用了两个jquery插件。一个是Jquery表单验证器,另一个是Jquery表单ajaxSubmit。使用正常的ajax提交,代码工作正常,但现在我也不得不发布一个文件。所以我正在使用ajaxSubmit。当我运行它时,我在浏览器控制台上收到错误"类型错误:e.preventDefault 不是一个函数"。

请不要将其标记为重复的问题,因为同一主题的其他问题的答案对我不起作用。

<script type="text/javascript">
    $(document).ready(function() {
        $("#addpost").validate({
            rules: {
                subject: "required",
                comment: "required"
            },
            messages: {
                subject: "Please enter a subject",
                comment: "Please enter some details",                   
            },
            submitHandler: function(e){
                e.preventDefault();
                $.ajaxSubmit({
                    url: '/addpost',
                    type: 'post',
                    dataType: 'html',
                    data : $( "#addpost" ).serialize(),
                    success : function(data) {
                        location.reload();
                    }
                });
            }
        });     
    }); 
</script>

我的问题的解决方案是更改提交处理程序,如下所示:-

submitHandler: function(form){
    $(form).ajaxSubmit({
            url: '/addpost',
            type: 'post',
            dataType: 'html',
            data : $( "#addpost" ).serialize(),
            success : function(data) {
                location.reload();
            }
     });
    return false
}

希望这会对某人有所帮助。

我不确定你会在提交处理程序中使用e.preventDefault()

删除该行并在 ajax 提交后添加return false;。这将阻止提交表格。

你的e不是事件,而是表单元素。 像这样更改您的代码:

submitHandler: function(form,e){ // place your element on second parameter
            e.preventDefault();
            $.ajaxSubmit({
                url: '/addpost',
                type: 'post',
                dataType: 'html',
                data : $( "#addpost" ).serialize(),
                success : function(data) {
                    location.reload();
                }
            });
        }

您在submitHandler中使用的e不提供事件对象。它提供了您正在验证的表单对象!因此,您遇到的错误。请阅读文档 1,以便了解您正在处理的对象和回调。

[1 - 链接]

例如,

在 laravel 中,我就是这样使用的,它可以工作。$( "#register-form" ).validate({

    submitHandler: function(form) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });
        var formData = new FormData(form);
        $.ajax({
            type:'POST',
            url:'{{route('registerapi')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data) {
                if ($.isEmptyObject(data.error)) {
                    $(':input','#register-form')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .prop('checked', false)
                        .prop('selected', false);
                    window.location.href = "{{route('/')}}";
                } else {
                    console.log(data.error);
                }
            }
        });
    }
});