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

Question

JQuery的著名插件ajaxForm修改了ajax提交的表单。

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

在我的实现中，点击提交按钮如预期的那样工作，但点击tab，空格-没有任何作用。表单没有提交，页面没有刷新。

我不知道是什么原因导致的，也不知道该如何去调试它。请帮忙:)

浏览器信息:
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，您可以使用FireQuery (FF的插件)进行可视化检查。

对于1，您可能需要进入插件的实际代码，即jquery.form.js。取决于您对表单使用的方法;如果ajaxSubmit，在290行(doSubmit)周围设置一个断点;如果ajaxForm，在第589行和第594行附近

我希望这对你调试错误有帮助。

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

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

Answer 2

尝试在提交按钮中添加自己的click处理程序，并放入一个测试警报，看看是否会触发。

如果可以的话，你可以自己在表单上调用submit。

Answer 3

哎呀，GTK+不会触发空格键点击。此外，空格键通常与页面滚动绑定(大多数浏览器)，因此默认情况下它可能不会触发点击。

一种修复方法是在文档上绑定keypress并手动触发click或表单submit。

$(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事件处理程序发生冲突。