为什么我要提交两次表格？带有单选按钮的 jQuery submit()答案

【问题标题】：Why am I submitting the form twice? jQuery submit() with radio button为什么我要提交两次表格？带有单选按钮的 jQuery submit()
【发布时间】：2010-12-15 16:47:26
【问题描述】：

我正在使用 jQuery 在 MVC 应用程序中提交表单。我在控制器中有一个断点，我看到它被击中了两次。我做错了什么？

这是我的 jQuery

 (function ($) {

    $(document).ready(function () {

        $(':radio').change(function () {

            $('#frmMDR').submit();
        });

    });
})(jQuery);

这里是html格式

<form action="/Module/ModuleIndex" id="frmMDR" method="get">
  <input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
   <input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
   <input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
 <input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>

我猜我不应该使用 change 事件。如果有人知道如何解决这个问题，我很想听听任何想法。非常感谢您提供的任何提示。

干杯，
~ck 在圣地亚哥

【问题讨论】：

一个可能的原因可能是事件处理程序被附加了两次。在浏览器控制台（Firebug）中尝试$(":radio").data('events').change.length。如果它返回 2，则附加了 2 个更改处理程序。
aside：$(':radio') 会将事件处理程序附加到页面上的所有单选按钮（如果有的话）。我更喜欢$('#frmMDR :radio').change(function () { 或$(':radio','#frmMDR').change(function () {。
是的，这绝对是问题所在。我该如何解决？为什么我要给处理器接线两次？谢谢！
我最终使用了这个......它工作正常，但似乎有点 hacky。我很乐意找到更好的解决方案... $('#frmMDR :radio').unbind('click').bind('click', function () { $('#frmMDR').submit() ; });
也许如果你打印出原始的点击处理程序，它会给你一个线索。

标签： javascript jquery html radio-button double-submit-problem

【解决方案1】：

您得到了两次点击，因为两个单选按钮正在改变状态。单选按钮只允许选择组中的一个元素，因此当您单击单选按钮时，会发生两个事件：

选择了一个新的单选按钮
先前选择的单选按钮被取消选择

这是两个事件，也是您的代码被命中两次的原因。为了解决这个问题，你可以给你的单选按钮一个类，然后使用类作为选择器来处理点击事件。

<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>

你的 jQuery 可能是：

$('.radio').click(function () {
    $('#frmMDR').submit();
});

【讨论】：

这只会在点击时触发 - 任何点击无线电控制的人都不会提交它。也许改变它，让它在选择时触发？
很确定click 实际上并不意味着单选按钮的“点击”。至少对于复选框，它会在 tab+空格键上触发。
我已经模拟了一些代码并在 IE7/IE8/FF3.6 和 Chrome 中进行了测试，它可以通过其他方法在点击和选择上运行。 jsfiddle.net/W2yBm

【解决方案2】：

您可能应该只检查已选择的更改功能中的已选择。这样，它只会为选定的单选按钮触发，您无需担心绑定或取消绑定任何事件，并且无论哪种输入法更改它，它都应该工作。

这是一篇关于 handling events from check boxes and radio buttons in JQuery 的文章。

【讨论】：

+1 用于考虑不（或不能）使用鼠标的人，即使在这种情况下它确实可以工作。 :)