【问题标题】：Why neither event.preventDefault() nor 'return false' stop my AJAX form submit action?为什么 event.preventDefault() 和 'return false' 都不会停止我的 AJAX 表单提交操作？
【发布时间】：2013-12-28 04:13:49
【问题描述】：

当我使用 AJAX 提交表单时，jQuery 的 event.preventDefault() 不起作用。

这是我的 HTML 代码的样子：

<form method="post" action="my_post_create_url" id="post-form">
    <textarea id="post-text" placeholder="Compose a new post"></textarea>
    <button type="submit" id="submit-post">Post</button>
</form>

这是我的 jQuery 代码：

$('#post-form').submit(function(e) {    
    e.preventDefault();
    var url = $(this).attr("action");
    $.ajax({
        type: "POST",
        url: url, // 'my_post_create_url'
        data: $(this).serialize(),
        dataType: "html",
        success: function(msg){

            alert("Success!");

        }
    }); 
});

这是我在控制器中处理它的方式：

public function createAction(Request $request){
    // some code here ...
    $form->handleRequest($request);
    if ($form->isValid()) {
        // some code here ...
        // ... then redirection 
    }
    return $this->render(...)
}

我什至在 jQuery 代码末尾尝试了“return false”，但它仍然重定向我:(

编辑 1：

似乎$('#post-form').submit(function(e) 在 Chrome 和 Safari 上都没有触发，还有什么帮助吗？

编辑 2：

我已经删除了我的基本 HTML 文件中的一些 javascript 文件，它现在可以在所有浏览器中正常工作。问题出在我的 js 文件中的其他地方。

【问题讨论】：

检查您的控制台是否有错误。您使用的是本地路径吗？
尝试实现error 函数，看看抛出了什么错误。 error: function (jqXHR, textStatus, errorThrown){alert(errorThrown);}
您是否在 DOM 加载后附加您的提交处理程序？如果没有，您可能会将处理程序附加到不存在的表单。
您确实应该对您的代码进行一些修改 - 但根据我对这个问题的经验，99% 的时间是因为当您尝试附加处理程序时表单不存在 - 所以 Jacob 的关于不存在的表单的评论可能是正确的 - 我会尝试将代码包装在 $(function() {/*your code here*/});
@user3035179 如果将其他事件处理程序附加到提交按钮并阻止默认行为，则不会触发表单提交事件。 plnkr.co/edit/4ErH5C?p=preview

标签： javascript jquery ajax forms symfony

【解决方案1】：

好吧，问题来自 window.popsate，它的行为因 Chrome（和 Safari）或 Firefox（和 Opera）而异，这是我的一个 js 文件中的问题行：

$(window).on("popstate", function(e) { ... });

对于那些面临同样问题的人，这里有一些问题的答案： Popstate on page's load in Chrome

【讨论】：