为何添加event.preventDefault()后，提交jQuery UI对话框表单仍刷新页面？

问题1：为啥提交jQuery UI对话框里的表单时页面会刷新？ #

嘿，这其实是浏览器表单的默认行为在搞鬼！不管表单是放在普通页面里还是jQuery UI的模态对话框中，只要触发了表单提交（比如点提交按钮、按回车），浏览器就会默认跳转到表单action属性指定的地址——如果没设置action，就会直接刷新当前页面。对话框只是把表单渲染成了模态层，根本没改变表单本身的提交逻辑，所以页面该刷新还是会刷新~

问题2：加了event.preventDefault()还是刷新？来看看你的代码问题 #

我仔细看了你贴的代码，问题出在这几个关键地方：

• 没把event作为回调参数传入：你写的是function() { ... }，然后直接在里面用event.preventDefault()，但这个event变量根本没定义啊！除非全局刚好有个同名变量，不然这行代码等于白写，完全没起到阻止默认行为的作用。
• success回调里的event.preventDefault()纯纯多余：等AJAX请求成功的时候，表单早就已经触发默认提交了，这时候再调用阻止默认行为，啥用都没有。
• 另外，重复选择$('#createGroupPopup > form')有点啰嗦，直接用$(this)指代当前触发提交事件的表单就行，代码更简洁还高效。

给你改好的代码： #

$('#createGroupPopup > form').submit(function(event) { 
    // 必须把event作为参数传进回调函数里
    event.preventDefault(); 
    $.ajax({ 
        type: "POST", 
        url: "form.php?action=group_create", 
        data: $(this).serialize(), // 用$(this)获取当前表单数据，更简洁
        success: function() { 
            $('#createGroupPopup').dialog("close"); 
        } 
    }); 
})

额外提个醒： #

如果你的提交按钮是<button>标签，要确认它的type是submit（默认就是，除非你改成了button）；要是你是用普通按钮（比如<button type="button">）点击后手动调用form.submit()，那submit事件里的阻止默认行为可能不生效，这时候得在按钮的点击事件里直接阻止默认，再发起AJAX请求哦。

内容的提问来源于stack exchange，提问作者DispléNam