jQuery 触发点击 - 请求中没有按钮值

Question

我正在使用 ASP.NET MVC4 和 jQuery 进行一项调查。而且我不是网络开发人员，所以我遇到了一些困难。

我的网站包含(简而言之)一个顶部菜单和一个表单。该表单是多步骤的，带有提交按钮“上一个”和“下一个”。我需要知道步骤类型，因此我命名了按钮，以便它们的值与其余字段一起传递。

当满足某些条件时，我需要在顶部菜单中显示一个附加按钮(它不是表单的一部分；现在我们将其称为“addButton”)，单击该按钮将导致表单提交。但我仍然需要知道“步骤类型”，所以我在表单中创建了一个隐藏的提交按钮(我们称之为“opButton”)，当我单击“addButton”时，我只是触发一些 javascript/jquery 来模拟单击“操作按钮”:

onclick="$('#opButton').trigger('click');"

当我使用桌面浏览器时，一切都可以完美地工作 - Request 对象中有一个适当的项目，并且它包含按钮的值。但是当我在移动设备上工作时(使用 Chrome 的远程调试进行测试)，没有这样的项目 - 我只是得到 null，仅此而已。

可能是什么原因？如果有任何建议，我将不胜感激。

Answer 1

TLDR:将 event.preventDefault(); 添加到添加按钮的 onclick 处理程序中，或确保正确键入添加按钮类型=“按钮”。

默认情况下，任何未指定其类型的 button 元素(如果位于表单内)都会被视为提交按钮。因此，如果您未在 HTML 中指定 type="button"，则只要您单击它，它就会触发表单提交，无论*通过事件处理程序赋予它任何其他行为。

**异常(exception)情况是您使用 event.preventDefault(); 或等效方法；或者如果您从处理程序返回 false (否， these are not equivalent )。两者都会阻止表单提交。*

如果您未在添加按钮上指定 type="button"，则会触发两个表单提交 - 第一个由提交按钮 (#opButton) 触发触发点击；第二个通过“原始”添加按钮单击。提交按钮在表单提交时首先执行，因为添加按钮将“等待”直到其所有 onclick 内容执行完毕，然后才会继续其自己的默认提交。 sumbit 按钮的“click”(及其表单提交)全部在 add 按钮的 onclick 处理程序中调用，因此它将在最终退出该处理程序之前执行。

桌面与移动设备的独特行为来自于各种浏览器/操作系统组合处理竞争表单提交的方式:有些会在第一个表单提交后阻塞，并且仅发送该表单(#opButton 提交)(我猜试图解决双击双重提交问题)，而其他人将开始处理第一个，但如果第二个在页面卸载之前及时到达，则发送第二个。您的桌面测试正在执行前者，并且仅处理第一个表单提交；您的移动测试正在执行后者，并允许最后一个表单提交“覆盖”第一个表单。

最终，没有办法在代码中告诉浏览器将让哪个拥有最终决定权:为了获得可靠的性能，您需要将非提交按钮 (#addButton) type =button 或将 event.preventDefault(); 添加到 (#addButton) 事件处理程序，以便只发生一次表单提交。