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

Posted 2023-05-08

【中文标题】jQuery 提交事件处理程序只工作一次

【英文标题】：jQuery submit event handler only works once

【发布时间】：2011-10-22 19:03:20

【问题描述】：

我正在使用 .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() 事件处理程序方法有什么问题。

【问题讨论】：

我相信您可以在您的工作示例中只使用return true 而不是手动提交？可能是错的……

我遇到了完全相同的问题，但您的解决方案对我不起作用。 :submit 是什么意思？它不是标准的 CSS 伪选择器...

:submit 选择器来自 jQuery (here's a description)

【参考方案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' 的元素。

【参考方案2】：

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

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

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

【参考方案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;
    
  );

【讨论】：

谢谢，好主意，但也没有用。但是，我确实设法通过在提交按钮上使用 .click() 事件处理程序来使其工作。我在失败路径上返回 false 并在成功路径上调用 $('#my-form').submit() 。我仍然想知道为什么 .submit() 事件处理程序方法不起作用。

你可以试试 $(this).submit(); ?

【参考方案4】：

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

【参考方案5】：

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