Отправить форму через AJAX в jQuery

Question

Я использую следующий код jQuery для отправки формы через AJAX.

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.Я думаю, что это из-за загрузки формы через AJAX после загрузки JavaScript.

Любое решение?

Answer 1

Если вы используете 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;
    });

Answer 2

Вы не можете прикрепить обработчики напрямую к HTML, который не существует

Есть 2 способа справиться с этим.

Свяжите обработчики при успешном обратном вызове 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');     
                      }
        });    

                                             })