jQuery触发点击-请求中没有按钮值 [英] jQuery trigger click - no button value in request

问题描述

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

I'm working on a kind of a survey using ASP.NET MVC4 and jQuery. And I'm NOT a web-developer, so I'm having some tough times.

我的网站包含(简要地)一个顶部菜单和一个表单.表单是多步骤的，提交按钮为上一个"和下一个".我需要知道步骤的类型，所以我给按钮命名，以便它们的值与其余字段一起传递.

My site contains (in brief) a top menu and a form. The form is multi-step with submit buttons "previous" and "next". I need to know the step type so I named the buttons so their value passes along with rest of the fields.

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

When some conditions are fulfilled I need to show an additional button (which is not a part of the form; let's call it "addButton" for now) in the top menu, clicking which would cause the form to submit. But I still need to know the "step type", so I created a hidden submit button in the form (let's call it "opButton") and when I click the "addButton" I just fire some javascript/jquery to simulate clicking the "opButton":

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

当我使用桌面浏览器时，一切都可以正常工作-Request对象中有一个适当的项目，其中包含按钮的值.但是，当我在移动设备上工作时(经过Chrome的远程调试测试)，没有这样的项目-我只会得到null，仅此而已.

And everything works flawlessly when I work with a desktop browser - there is an appropriate item in the Request object and it contains the button's value. But when I'm working on a mobile device (tested with Chrome's remote debugging) there is no such item - I just get null and that's it.

可能是什么原因?我将不胜感激任何建议.

What could be the cause? I'd appreciate any suggestions.

推荐答案

TLDR :在添加按钮的onclick处理程序之前添加event.preventDefault();或确保正确键入type="button"

TLDR: Prepend event.preventDefault(); to the add button's onclick handler or make sure the add button is properly typed type="button".

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

By default, any button element that does not specify its type is treated as a submit button if within a form. So if you do not specify type="button" in your HTML, it triggers a form submission any time you click on it, regardless* of any other behaviour given to it via event handlers.

**如果您使用的是event.preventDefault();或同等版本，则例外；或如果您从处理程序中返回false(否，这些不相等) .两者都会阻止提交表单.*

**The exceptions are if you use event.preventDefault(); or equivalent; or if you return false from your handler (no, these are not equivalent). Either will prevent a form submission.*

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

If you are not specifying type="button" on your add button, then two form submissions are being triggered - the first by the submit button's (#opButton) triggered click; the second by the "original" add button click. The submit button gets first go at form submission because the add button will "wait" till all of its onclick content has executed before moving on to its own default submit. The sumbit button's "click" (and therefore its form submit) is all called within the add button's onclick handler, so it will all execute before finally exiting that handler.

独特的桌面与移动行为来自各种浏览器/操作系统组合如何处理竞争的表单提交:有些会在第一次提交后被阻止，而仅发送一个(#opButton提交)(我想是为了避免双重攻击)单击两次提交问题)，而其他人将开始处理第一个问题，但如果在页面卸载之前及时发送第二个问题，则发送第二个问题.您的桌面测试使用的是前者，并且仅处理第一个表单提交.您的移动测试正在执行后者，并允许最后一个表单提交覆盖"第一个表单.

The peculiar desktop vs. mobile behaviour comes from how various browser/os combos process competing form submissions: some will block after the first and only send that one (the #opButton submit)(I guess in an attempt to combat double-click double submit problems), while others will begin processing the first, but send the second if it comes in time before the page is unloaded. Your desktop tests are doing the former and only processing the first form submit; your mobile tests are doing the latter and allowing the last form submit to "overwrite" the first.

最终没有办法在您的代码中告诉浏览器将拥有最终决定权:为了获得可靠的性能，您需要使不提交按钮(#addButton)type=button或向您的计算机添加event.preventDefault(); (#addButton)事件处理程序，以便仅进行一次表单提交.

Ultimately there's no way to tell in your code which the browser will let have the final say: for reliable performance you need to either make the non-submitting button (#addButton) type=button or add event.preventDefault(); to your (#addButton) event handler so that only one form submission is happening at all.

这篇关于jQuery触发点击-请求中没有按钮值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！