Javascript 在jQuery中通过AJAX提交表单

我使用以下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加载表单。

---

有什么解决方案吗？

如果使用jQuery 1.7+您可以尝试使用.on（）委托事件并绑定到具有相同类的所有未来表单。 尝试查找未动态插入而不是$（文档）的最近父级

---

不能将处理程序直接附加到不存在的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');     
                      }
        });    

                                             })

---

嗯。。。去学习它是如何工作的？不，真的，如果您先用AjaxForm类将事件绑定到所有表单，然后用这个类加载另一个表单（不绑定提交事件），它将不起作用（这真的很奇怪：-）@SergeS:对不起，我不能在评论框中对笑话进行投票。

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

                                             })