在jQuery中通过AJAX提交表单
在jQuery中通过AJAX提交表单
提问于 2012-03-05 02:46:49
我使用以下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加载表单。
有什么解决方案吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-05 02:51:10
如果使用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;
});Stack Overflow用户
发布于 2012-03-05 02:58:15
您不能将处理程序直接附加到不存在的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');
}
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9557761
复制相关文章
相似问题
腾讯云开发者
