Javascript 更改事件上的Jquery.hide（）或.show（）禁止表单提交

我遇到了一个看起来非常模糊的bug，我想为后代记录它。发生的事情如下：

我正在向用户显示一个HTML表单，表单底部有许多文本字段和一个提交按钮。提交按钮上方是一条警告消息，根据用户是否填写了所有必需的信息，该消息会出现或消失。在测试期间（自动使用Capybara，或在浏览器中手动），我填写页面下方的每个字段，然后单击Submit按钮，但第一次单击没有注册。第二次单击将按预期提交表单

---

我发现，如果禁用自定义Javascript，则无需再次单击。经过一些消除过程后，我确定是一个Jquery行导致了失败：

$（“#警告消息”）.hide（）。注释这一行，并按预期填写和提交表格。重新启用此行，表单提交需要额外的单击。这到底是怎么回事？
我最终发现这是因为，无论是在手动测试期间，还是在水豚网络工具包模拟时，当您单击一个元素（如提交按钮）时，该元素在屏幕上注册为特定的X/Y坐标。您不是在单击DOM元素，而是在单击坐标。由于我设置此页面的（惰性）方式，当我填写所有必需的元素，然后单击Submit按钮时，在单击Submit按钮时会触发一个Jquery
change
事件，该事件会导致
$（“#警告消息”）.hide（），这反过来会导致submit按钮跳出我单击的区域之外，因此submit事件从一开始就不会被触发，因为浏览器没有意识到我单击了按钮

我仍然不清楚如何理解这一点，但这绝对不是一个bug本身，更不是（我自己）对浏览器事件处理方式的误解。我已经解决了这个问题，将警告div包装在一个固定高度的容器中，这样无关的Jquery更改事件就不会导致submit按钮跳转

不管怎样，我希望这能帮助别人