source

TypeError: e.preventDefault가 함수가 아닙니다.

factcode 2023. 9. 26. 22:34
반응형

TypeError: e.preventDefault가 함수가 아닙니다.

저는 자바스크립트와 jquery를 처음 접합니다.저는 이 코드에서 두 개의 jquery 플러그인을 사용하고 있습니다.하나는 Jquery form validator이고 다른 하나는 Jquery form ajaxSubmit입니다.일반적인 아약스 제출의 경우 코드는 잘 작동하지만, 이제는 파일도 올려야 했습니다.그래서 ajaxSubmit을 사용하고 있습니다.이를 실행하면 브라우저 콘솔에 "TypeError: e.preventDefault is not function"이라는 오류가 나타납니다.

같은 주제의 다른 질문에 대한 답변이 제게 맞지 않으니 중복 질문으로 표시하지 말아주세요.

<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()제출물 취급자로

해당 줄을 제거하고 추가합니다.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();
                }
            });
        }

e당신은 안에서 사용하고 있습니다.submitHandler이벤트 개체를 제공하지 않습니다.유효성 검사 중인 양식 개체를 제공합니다!따라서 오류가 발생하는 것입니다.어떤 대상과 콜백을 다루고 있는지에 대한 아이디어를 얻을 수 있도록 설명서 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);
                }
            }
        });
    }
});

언급URL : https://stackoverflow.com/questions/36034493/typeerror-e-preventdefault-is-not-a-function

반응형