jQuery提交事件处理程序只能工作一次。

Question

我正在使用jQuery 1.6验证一个简单的表单，使用.submit()事件处理程序当表单无效时返回false：

$(function() {
  $('#my-form').submit(function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });
});

如果用户已经做出选择，表单将被正确提交。如果用户没有做出选择，则会显示警告并且表单不会被提交（同样是正确的）。问题在于，在这种情况下，提交按钮不再起作用。换句话说，一旦发生失败案例，用户仍然停留在表单中，但单击提交按钮不起作用。

我已验证了HTML（没有重复的ID，没有名称/ID为“submit”，“length”等）。该表单是动态加载的，因此使用Firebug进行测试是一个问题。表单上的其他事件处理程序运行良好（例如，当字段值更改时，我会看到警告）。另一个奇怪的现象是：我用“event.preventDefault(); return true”替换了“return false”，但表单仍然被提交。（我以为.preventDefault()可以阻止它。）

有什么想法吗？

编辑：此方法可行：

$(function() {
  $('#my-form :submit').click(function(event) {
    if (...validation stuff goes here...) {
      alert("Invalid entry");
      return false;
    } else {
      $('#my-form').submit();
    }
  });
});

我仍然想知道我的原始.submit()事件处理程序方法有什么问题。

- Mark Westling

---

我认为在你的示例中，你可以只使用 return true 而不是手动提交。但我可能错了... - jondavidjohn

我有完全相同的问题，但你的解决方案对我不起作用。你所说的 :submit 是什么意思？它不是标准的 CSS 伪选择器... - Sophivorus

:submit 选择器来自于 jQuery（这里有一个描述）。 - Mark Westling

Answer 1

你的表单很可能是通过某种ajax方式重新加载的。

由于ajax只重新加载页面的一部分，$(function() { yourCodeHere });不会再次运行。因此，你的onSubmit事件处理程序没有重新附加到你的表单上。

使用这个方法重新将onSubmit事件处理程序附加到你的表单上：

$('body').on('submit','#my-form', function() {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
}

我们可以将其翻译为人类语言，即“对于任何 身体 的变化，重新绑定onsubmit事件到id为'my-form'的元素上。”

- Adriano

Answer 2

请阅读"$().on"方法的文档（这个方法替代了.live()）。 http://api.jquery.com/on/ 检查您的表单是否被某些ajax方法重新创建 - 如果是，处理程序将被丢弃。

- Marcin Zawadzki

Answer 3

如果表单是动态加载的，您可以尝试使用.live()绑定事件。

像这样...

  $('#my-form').live('submit', function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });

- jondavidjohn

---

谢谢，好主意，但那也没用。不过，我通过在提交按钮上使用 .click() 事件处理程序来使它工作了。在失败路径上返回 false，在成功路径上调用 $('#my-form').submit()。我仍然想知道为什么 .submit() 事件处理程序方法不起作用。 - Mark Westling

你可以尝试 $(this).submit(); 吗？ - serialworm

Answer 4

很可能有其他事件处理程序在其他地方绑定了。获取Chrome扩展Visual Event，以查看详细信息，所有已附加到元素的处理程序，以查看是什么阻止它。

- webdevinci

Answer 5

此外，还要检查是否有其他的Javascript代码干扰。例如，Web Forms (.NET)通常会有回调或一些相关的代码来处理postbacks。由于我对.NET不熟悉，直到我禁用了包含的脚本/库（进行测试和查看）后，问题才得以解决。

- user1889992