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

【问题标题】：jQuery trigger click - no button value in requestjQuery触发点击 - 请求中没有按钮值
【发布时间】：2014-03-11 12:33:16
【问题描述】：

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

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

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

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

当我使用桌面浏览器时，一切都完美无缺 - Request 对象中有一个适当的项目，它包含按钮的值。但是当我在移动设备上工作时（用 Chrome 的远程调试测试）没有这样的项目 - 我只是得到 null 就是这样。

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

【问题讨论】：

标签： jquery asp.net asp.net-mvc mobile

【解决方案1】：

TLDR：将 event.preventDefault(); 添加到添加按钮的 onclick 处理程序之前，或者确保正确键入添加按钮 type="button"。

默认情况下，如果在表单中，任何未指定其类型的button 元素都将被视为提交按钮。因此，如果您没有在 HTML 中指定 type="button"，它会在您单击它时触发表单提交，而不管*通过事件处理程序给予它的任何其他行为。

**如果您使用event.preventDefault(); 或等效项，则例外；或者如果你从你的处理程序返回false（不，these are not equivalent）。两者都将阻止表单提交。*

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

独特的桌面与移动行为来自各种浏览器/操作系统组合如何处理竞争性表单提交：有些会在第一个之后阻塞并且只发送那个（#opButton 提交）（我想是为了对抗双重-单击双重提交问题），而其他人将开始处理第一个，但如果在页面卸载之前及时发送第二个。您的桌面测试正在执行前者，并且只处理第一个表单提交；您的移动测试正在执行后者并允许最后一个表单提交以“覆盖”第一个。

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

【讨论】：

【解决方案2】：

当您在移动环境中时，您触发的事件（“点击”）可能不同，例如“点击”事件。试着检查一下。

另外，如果您真的不需要发送 opButton，您可以直接提交表单，而不是触发点击隐藏的提交按钮，例如

$('your_form').submit();

【讨论】：

【解决方案3】：

有时使用隐藏项可能会非常棘手，因为每个浏览器都会根据您隐藏它的方式不同地对待它们。

我的建议是去掉隐藏的按钮。然后，您可以即时创建隐藏的<INPUT>，附加到表单，然后使用 jQuery 提交：

$(function() {
    $('<input>').attr({
        type: 'hidden',
        value: 'addButton',
        name: 'operation'
    }).appendTo('form');

    $('form').submit();
});

然后在您的请求对象上查找“操作”项并从中获取值。

【讨论】：