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

Я использую следующий код 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.

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

Ответ 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;
    });

Ответ 2

Вы не можете прикреплять обработчики непосредственно к 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');     
                      }
        });    

                                             })
 }

Другим способом является делегирование обработчика на более высокий уровень в документе, так что он является avalibale для будущих элементов соответствия

 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');     
                      }
        });    

                                             })