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加载表单则不起作用。我认为这是因为在加载JavaScript后通过ajax加载表单。

任何解决方案？

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

有两种方法可以处理它。

将处理程序绑定在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');     
                      }
        });    

                                             })

在jQuery中通过AJAX提交表单

2 个答案: