使用jQuery绑定Form submit事件失效，表单提交后跳转页面

核心原因：事件绑定时机错误（动态元素未被正确监听） #

从代码里的$('#exampleModal').on('hide.bs.modal')可以判断，表单大概率是动态插入到模态框中的（比如通过JS加载到#bodymodal内）。你原有的$("#send").submit()直接绑定方式，只会在document.ready时绑定已存在的DOM元素——此时模态框里的表单还未生成，事件根本没绑定到目标表单上，导致提交时触发默认跳转行为。

解决方案1：使用事件委托（最可靠） #

将事件绑定到静态父元素（比如document或模态框本身），通过事件冒泡捕获触发，即使表单是动态生成的也能正常监听：

$(document).ready(function () {
    // 改用事件委托绑定submit事件
    $(document).on('submit', '#send', function (event) {
        event.preventDefault(); // 阻止默认跳转
        // 修正拼写错误：datatype → dataType（不影响submit触发，但会影响AJAX响应解析）
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "/api/send",
            data: JSON.stringify({
                destinatario: $('#destinatario').val(),
                importo: $('#importo').val(),
                casuale: $('#casuale').val()
            }),
            success: function (result) {
                console.log("worked")
            },
            error: function (result) {
                console.log("not worked")
            }
        });
        return false; // 双重保险阻止默认行为
    });

    $('#exampleModal').on('hide.bs.modal', function (e) {
        $("#bodymodal").empty();
    })
})

其他排查点（若事件委托仍无效） #

• 检查jQuery引入状态：打开浏览器F12控制台，输入$或jQuery，若报错$ is not defined，说明未引入jQuery或引入顺序错误（必须在自定义脚本之前引入）。
• 检查ID冲突：页面中是否存在其他id="send"的元素？浏览器只会匹配第一个元素，导致事件绑定到错误对象上。
• 查看控制台报错：F12控制台的错误信息（如DOM元素未找到）能快速定位问题根源。

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