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进行测试是一个问题。表单上的其他事件处理程序工作正常（例如，我在字段值更改时看到警报）。另一个奇怪之处：我将“return false”替换为“event.preventDefault（）;返回true”，但表单仍然提交。（我以为.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;
    }
}

我们可以将人类语言翻译为“对于正文中的任何更改，将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

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

Answer 5

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

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

5 个答案: