如何阻止jQuery中submitProfileForm函数在页面加载时自动执行？

嘿，这问题我之前也踩过一模一样的坑！核心错误出在你绑定表单submit事件的那一行，咱们一步步拆解清楚：

1. 立即执行函数的致命问题 #

你写的代码里：

$('form.Zebra_Form').on('submit', submitProfileForm());

这里的submitProfileForm()是直接调用函数，页面加载到这行代码时就会立刻执行它，完全不是你想要的“等待表单提交时触发”的逻辑。

正确的写法应该是传递函数引用（不带括号），这样当submit事件真正触发时，浏览器才会调用这个函数：

$('form.Zebra_Form').on('submit', submitProfileForm);

2. 保存按钮的逻辑优化 #

另外，你的保存按钮点击事件里，不管表单验证是否通过，都会执行submitProfileForm()，这大概率不符合你的预期。应该先判断验证结果，只有通过时才执行提交逻辑，同时还要阻止按钮的默认行为避免不必要的页面跳转：

$('.save').on('click', function(e){
    e.preventDefault(); // 阻止按钮默认行为
    const isValid = $('form.Zebra_Form').parsley().validate();
    if (isValid) {
        submitProfileForm();
    }
});

3. 完整修正后的代码 #

把这些调整整合后，最终代码应该是这样的：

function submitProfileForm() { console.log('here'); }
$(function () {
    // 保存按钮点击事件
    $('.save').on('click', function(e){
        e.preventDefault();
        const isValid = $('form.Zebra_Form').parsley().validate();
        if (isValid) {
            submitProfileForm();
        }
    });
    // 表单提交事件
    $('form.Zebra_Form').on('submit', function(e){
        e.preventDefault(); // 阻止表单默认提交（避免页面刷新打断流程）
        submitProfileForm();
    });
});

额外说明 #

如果你的submitProfileForm()已经内置了阻止默认提交的逻辑，或者不需要阻止默认行为，那表单提交事件也可以简化成直接传递函数引用：

$('form.Zebra_Form').on('submit', submitProfileForm);

但通常我们会主动阻止默认的表单提交，因为默认提交会刷新页面，可能打断前端的处理流程。

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