在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加载表单。

有解决方案吗

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