JQuery 的 ajaxForm 在点击时提交，但在空间上不提交

Question

JQuery 众所周知且深受喜爱的插件 ajaxForm 修改ajax提交的表单。

我已经让它正常工作，包括回调函数。我发现问题在于，在很多情况下，我不是按 Enter 键，而是按 tab space 组合。这在填写文本区域时很有用，或者只是因为它比使用鼠标更快。

在我的实现中，单击“提交”按钮可以按预期工作，但单击“制表符”、“空格” - 不会执行任何操作。表单未提交，页面未刷新。

我不知道是什么原因导致这个问题，或者我将如何调试它。请帮忙:)

浏览器信息：
Ubuntu 10.04
FireFox 3.6.18 失败
google-chrome 12.0.742.112 失败

Windows 7
Firefox 3.6.15 失败
Chrome 12.0.742.112 失败
Internet Explorer 9.0.8080.16413 - 按预期工作。

Answer 1

我能想到的两个可能的原因是：

1. 按按钮上的空格不会触发“单击”操作/事件。
2. 其他一些处理程序会拦截单击事件。例如，确保您不在同一表单上同时使用 ajaxSubmit 和 ajaxForm。

对于2，您可以使用 FF 插件 FireQuery 进行直观检查。

对于 1，您可能需要单步执行插件的实际代码，即 jquery.form.js。取决于您使用的表格方法； if ajaxSubmit，在第 290 行附近设置断点 (doSubmit)； if ajaxForm，大约第 589 和 594 行。

我希望这可以帮助您调试错误。

如果您发现这是第一种情况，您可能需要为按钮附加一个按键处理程序并在浏览器中模拟相同的行为：

$('#submitButton').keypress(function(event) {
  if (event.which == 32)  // space bar pressed
    $(this).click();
});

Answer 2

尝试将您自己的点击处理程序添加到提交按钮，并放入测试警报以查看是否会触发。

如果有效，您可以自己在表单上调用“提交”。

Answer 3

AFAIK，GTK+ 不会触发空格键上的点击。此外，空格键通常与页面滚动相关（大多数浏览器），因此默认情况下它可能不会触发单击。

一种修复方法是在文档上绑定按键，并手动触发点击或表单提交。

$(document).die('keypress.spacebar').live('keypress.spacebar', function() {
   // do nothing if not spacebar
   if(e.which != 32) { return; };

   var button = $('#mySubmitButton')[0];
   // check if submit button has focus. if not, return
   if(button !== document.activeElement) {
       return;
   }

   // else, go ahead and submit form
   $('#myform').submit();
   e.preventDefault();
});

请注意，我使用命名空间事件来避免与表单上的任何其他keypress 事件处理程序发生任何冲突。