提交表单后JQuery脚本失效，页面直接跳转至Servlet问题求助

我正在开发一个博客演示项目，已创建文章发布模型。原本编写的一段jQuery脚本可阻止表单提交时跳转到Servlet的默认行为，起初运行正常，但修复Servlet中的错误并重新运行项目后出现问题：点击Post按钮时，页面直接跳转到Servlet页面，而我期望表单提交后停留在当前页面，让Servlet在后台执行。

以下是失效的代码：

<!-- Add Post JS -->
<script>
$(document).ready(function(){
   alert("loaded")
  
$("#add-post").on("submit",function (event) {
    // when the form is submitted 
    alert("clicked")
    event.preventDefault();
    
    // console.log("Submitted")   // For checking its working or not 
    
    let form=new FormData(this);
    // requesting to server
    $.ajax({
        url: "AddPostServlet",
        type: "POST",
        success: function(data, textStatus, jqXHR){
            // Success
            console.log(data)
        },
        error: function(jqXHR, textStatus, errorThrown){
            // Error
            
        },
        processData: false,
        contentType: false
    })
})
</script>

问题截图 #

• 文章弹窗：
  
• 点击Post按钮后跳转至Servlet页面：
  

完整代码可查看TechBlog项目。

排查与解决方法 #

1. 验证jQuery是否加载正常：打开浏览器控制台输入$，若提示$ is not defined，说明jQuery脚本未正确引入，检查页面中jQuery的引用路径是否被误改。
2. 确认表单ID匹配：检查HTML中表单的id是否确实为add-post，ID不匹配会导致事件绑定失效。
3. 改用事件委托绑定：如果表单是动态生成（比如通过弹窗加载），原绑定方式可能失效，替换为以下代码：

$(document).on("submit", "#add-post", function(event) {
    event.preventDefault();
    // 后续AJAX逻辑保持不变
});

4. 查看控制台报错：打开开发者工具Console面板，检查是否有脚本执行错误（如FormData使用异常、AJAX请求失败等），这些错误会导致代码中断，event.preventDefault()无法执行。
5. 检查按钮类型：确认表单内的Post按钮为type="submit"，若被改为type="button"则不会触发submit事件。

内容的提问来源于stack exchange，提问作者Swapnil