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

Question

我正在使用 .submit() 事件处理程序使用 jQuery 1.6 验证一个简单的表单，该处理程序在表单无效时返回 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）。表单是动态加载的，因此使用 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();
    }
  });
});

我仍然想找出我的 original.submit() 事件处理程序方法有什么问题。

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;
    }
}

我们可以将人类语言翻译为“对于 body 的任何更改，将 onsubmit 事件重新附加到 id 为 'my-form' 的元素。

Answer 2

请阅读此文档以“$().on”方法（此替换 .live()）

http://api.jquery.com/on/

检查您的表单是否没有被某些 ajax 方法重新创建 - 如果它是处理程序将被丢弃。

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;
    }
  });

Answer 4

很可能在别处绑定了另一个事件处理程序。获取 chrome 扩展 Visual Event 以详细查看附加到该元素的所有处理程序，以查看是什么阻止了它。

Answer 5

另外，请检查以确保没有其他 Javascript 干扰。例如，Web 窗体 (.NET) 通常会有回调或一些相关代码来处理回发。作为 .NET 的新手，直到我禁用了包含的脚本/库（以测试和查看），问题才得到解决。