jQuery에서 AJAX를 통해 양식 제출

jQuery에서 AJAX를 통해 양식 제출

저는 AJAX를 통해 양식을 제출하기 위해 아래의 jQuery 코드를 사용하고 있습니다.

jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted')
                      },
            error   : function( xhr, err ) {
                        alert(''Error);     
                      }
        });    
        return false;
    });

코드가 에이잭스 없이 완벽하게 작동합니다.그러나 Ajax를 통해 양식을 로드하면 작동하지 않습니다. 자바스크립트 로드 후 ajax를 통한 로딩 폼 때문인 것 같습니다.

해결책은?

jQuery 1.7+를 사용하는 경우 .on()을 사용하여 이벤트를 위임하고 동일한 클래스를 가진 이후의 모든 양식에 바인딩할 수 있습니다.$(문서) 대신 동적으로 삽입되지 않은 가장 가까운 상위 항목을 찾습니다.

$(document).on('submit', 'form.AjaxForm', function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                         alert('Submitted');
            },
            error   : function( xhr, err ) {
                         alert('Error');     
            }
        });    
        return false;
    });

존재하지 않는 HTML에 핸들러를 직접 첨부할 수 없습니다.

그것을 다루는 방법은 두 가지가 있습니다.

Ajax의 성공 콜백 내에서 처리기를 바인딩합니다.

    $(formParentSelector).load(formFileUrl, function() {
        /* within this success callback the new html exists and can run code*/
        AjaxForm();
    });

function    AjaxForm(){
    jQuery('form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })
 }

다른 방법은 문서에서 처리기를 더 높은 수준으로 위임하여 나중에 일치하는 요소에 사용할 수 있도록 하는 것입니다.

 jQuery(document).on('submit','form.AjaxForm').submit( function() {            
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        alert('Submitted');
                      },
            error   : function( xhr, err ) {
                        alert('Error');     
                      }
        });    

                                             })

언급URL : https://stackoverflow.com/questions/9557761/submit-form-via-ajax-in-jquery