当我尝试用jQuery提交表单时,一个简单的
$('#form').submit();
可以正常工作,但是
$('#form').submit(function(){...});
完全被忽略。没有错误信息,什么都没有。它继续前进,并继续我的其余代码。
我在这里发现的更接近的问题是这个:JQuery表单提交功能不工作它工作得更好,但是submit()会重新加载页面并取消Ajax的好处。所以不幸的是,它不适合我:(
下面是我的全部代码(为了测试的目的,我把真实的项目简化为最简单的):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>please help</title>
<link href="../htdocs/css/styles.css" rel="stylesheet">
</head>
<body>
<form id="myForm" method="post">
<input name="key01" type="checkbox" id="key01" checked>
<input name="key02" type="checkbox" id="key02" checked>
<input name="key03" type="checkbox" id="key03" checked>
<input name="key04" type="checkbox" id="key04" checked>
<input name="key05" type="checkbox" id="key05" checked>
<div id="testBtn">test submit</div>
</form>
<div id="resultDisplay"></div>
<script src="../htdocs/js/jquery-2.2.4.min.js"></script>
<script src="../htdocs/js/icheck.min.js"></script>
<script type="application/javascript">
$(function () {
$('#testBtn').click(function () {
console.log('click out');
$('#myForm').submit(function () {
console.log('click In');
$.ajax({
method: 'POST',
url: 'myResult.php',
data: $(this).serialize()
}).done(function (data) {
console.log('data back');
$("#resultDisplay").html(data);
}).fail(function () {
alert("error");
});
});
});
});
</script>
</body>
</html>
唯一的console.log是提交函数之外的第一个。我尝试用警报代替,用get方法,在Apache和nginx服务器上使用不同的jQuery版本…都是一样的:
PHP: 5.6.23jQuery 2.2.4(多个版本已测试)
请帮帮我,我走投无路了
实际上$('#form')返回一个数组,正确的执行方法是指定哪个数组项将执行给定的函数:
$("#form")[0].submit(function(){
//do the stuff
})