我正在使用 ASP.NET MVC4 和 jQuery 进行一项调查。而且我不是网络开发人员,所以我遇到了一些困难。
我的网站包含(简而言之)一个顶部菜单和一个表单。该表单是多步骤的,带有提交按钮“上一个”和“下一个”。我需要知道步骤类型,因此我命名了按钮,以便它们的值与其余字段一起传递。
当满足某些条件时,我需要在顶部菜单中显示一个附加按钮(它不是表单的一部分;现在我们将其称为“addButton”),单击该按钮将导致表单提交。但我仍然需要知道“步骤类型”,所以我在表单中创建了一个隐藏的提交按钮(我们称之为“opButton”),当我单击“addButton”时,我只是触发一些 javascript/jquery 来模拟单击“操作按钮”:
onclick="$('#opButton').trigger('click');"
当我使用桌面浏览器时,一切都可以完美地工作 - Request 对象中有一个适当的项目,并且它包含按钮的值。但是当我在移动设备上工作时(使用 Chrome 的远程调试进行测试),没有这样的项目 - 我只是得到 null,仅此而已。
可能是什么原因?如果有任何建议,我将不胜感激。
最佳答案
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
) 事件处理程序,以便只发生一次表单提交。
关于jQuery 触发点击 - 请求中没有按钮值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22325882/