本文详解 jQuery 中因 DOM 加载时机不当导致表单无法提交的问题，重点说明如何将事件绑定逻辑统一置于 $(document).ready() 内，并提供可直接运行的修复代码与关键注意事项。
本文详解 jquery 中因 dom 加载时机不当导致表单无法提交的问题，重点说明如何将事件绑定逻辑统一置于 `$(document).ready()` 内，并提供可直接运行的修复代码与关键注意事项。
在使用 jQuery 实现无刷新表单提交时，一个极易被忽视却高频出现的问题是：事件监听器未正确绑定到 DOM 元素上。如您所见，原始代码将 $("#MyForm").submit(...) 处理逻辑置于 $(document).ready() 之外，这会导致 JavaScript 在页面 DOM 尚未完全加载完成时就尝试查找 #MyForm 元素——结果为 null，进而使 .submit() 事件监听器注册失败。后续点击 #SendDiv 触发 $("#MyForm").submit() 时，因无有效监听器，表单不会执行 AJAX 提交，也无任何报错提示，表现为“静默失效”。
✅ 正确做法是：所有依赖 DOM 的 jQuery 选择器和事件绑定，必须包裹在 $(document).ready() 回调中，确保 DOM 就绪后再执行。
以下是修复后的完整、可直接部署的 JS 代码：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function() {
// 点击 #SendDiv 区域时，主动触发表单提交（不刷新页面）
$("#SendDiv").click(function(event) {
event.preventDefault(); // 阻止 <a href="#"> 默认跳转行为
$("#MyForm").submit();
});
// 绑定表单 submit 事件（由 click 或原生提交触发）
$("#MyForm").submit(function(event) {
event.preventDefault(); // 关键：阻止浏览器默认提交（避免页面刷新）
// 收集表单数据（推荐使用 serialize() 更健壮，此处保留原逻辑便于理解）
var formData = {
'Email': $('input[name="Email"]').val().trim(),
'Password': $('input[name="Pass"]').val().trim()
};
// 验证必填字段（增强鲁棒性）
if (!formData.Email || !formData.Password) {
alert('请填写邮箱和密码');
return;
}
// 执行 AJAX 提交
$.ajax({
type: 'POST',
url: './process.php',
data: formData,
dataType: 'json',
beforeSend: function() {
$("#error").fadeOut(); // 隐藏旧错误提示
// 可选：启用 loading 状态（如显示 spinner）
$('.spinner').addClass('loading');
},
timeout: 10000 // 10秒超时保护
})
.done(function(data) {
console.log('服务器响应:', data);
if (data.success) {
window.location.href = "./success.php";
} else if (data.errors && data.errors.Error) {
window.location.href = "./error.php";
} else {
alert('提交失败：未知错误，请重试');
}
})
.fail(function(xhr, status, error) {
console.error('AJAX 请求失败:', status, error);
if (status === 'timeout') {
alert('请求超时，请检查网络后重试');
} else {
alert('网络异常，请稍后重试');
}
})
.always(function() {
$('.spinner').removeClass('loading'); // 清理 loading 状态
});
});
});? 关键注意事项与最佳实践：
-
event.preventDefault()不可省略：无论是#SendDiv.click还是#MyForm.submit，都需显式阻止默认行为，否则<a></a>标签会跳转、表单会整页提交。 -
避免重复绑定：确保该脚本仅被引入一次，且不与其他同作用域的
$(document).ready()块冲突。 -
服务端校验不可替代：前端验证（如邮箱格式、密码长度）仅用于提升用户体验，
process.php必须独立完成安全校验与防注入处理。 -
推荐升级写法：对于现代项目，建议改用
FormData对象 +fetch()API 替代$.ajax()，更轻量且原生支持 Promise；若坚持 jQuery，可用$('#MyForm').serialize()自动提取全部合法字段。 -
调试技巧：在
.submit()回调开头添加console.log('Form submit triggered')，可快速确认事件是否真正触发。
遵循以上结构与规范，即可彻底解决“点击无响应、表单不提交”的典型 jQuery 绑定失效问题，实现稳定可靠的异步邮件/表单提交功能。
