jquery - 在 Chrome/Safari 中提交表单两次

Question

我正在寻求执行基本的表单发布，但以下内容在 Chrome 和 Safari 中提交到服务器两次(但在 Firefox 中的行为符合预期):

<form id="create-deck-form" action="/decks/create" method="post">
  <fieldset>
    <legend>Create new deck</legend>
    <label for="deck-name-field">Name</label>
    <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" />

    <label for="tag-field">Tags</label>
    <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" />

    <input class="add-button" type="submit" value="Create" />
  </fieldset>
</form>

我想在提交之前使用onsubmit属性对字段进行验证，但只要返回值为true，表单就会提交两次。

我试图将 jQuery 处理程序绑定(bind)到表单，但在这里，默认行为不会被阻止，表单会提交两次，例如:

<script type="text/javascript">
 $(document).ready(function() {
     $("#create-deck-form").submit(function(event){
          if($("#deck-name-field").val() == "") {
            event.preventDefault();
            alert("deck name required");
          }
        });
 });
</script>

虽然我认为对于新人来说这里存在一些明显的错误，但我非常困惑为什么提交(无论是否经过验证)都会在 Chrome 和 Safari 中向服务器发出重复的帖子。如果您有任何见解，我将不胜感激。

Answer 1

此问题实际上与 Facebox (http://defunkt.github.com/facebox/) 相关。 Facebox 初始化会在页面加载后引发第二组请求。因此，如果您发布到 /myaction/create，Facebox 将启动第二组请求，并将基本 URL 设置为 /myaction/create。解决方法是在发布后重定向到处理 get 请求的 URL，这样您就不会执行两次发布。非常感谢您的帮助。