Question

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

我已经让它正常工作，包括回调函数。我发现破坏的是，在许多情况下，我没有点击进入，而是点击tab space组合。这在填写textareas的情况下很有用，或者仅仅因为它比到达鼠标要快。

在我的实现中，单击“提交”按钮可以按预期工作，但是点击选项卡，空格 - 什么都不做。表单不提交，页面不刷新。

我不知道是什么导致这种情况，或者我将如何调试它。请帮忙:)

浏览器信息：
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

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

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

对于2，您可以使用FireQuery（FF的插件）进行目视检查。

对于1，您可能需要进入插件的实际代码，即jquery.form.js。根据您用于表单的方法; if ajaxSubmit，在第290行（doSubmit）附近设置断点;如果ajaxForm，则在第589和594行附近。

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

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

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

Answer 2

尝试将自己的点击处理程序添加到提交按钮，然后输入测试提醒以查看是否会触发。

如果可行，您可以自己在表单上调用提交。

Answer 3

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

一种解决方法是在文档上绑定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事件处理程序发生冲突。

JQuery ajax表单在单击时提交，但不在空间上提交

3 个答案: