jquery：$(input).keydown 无法在单选按钮上设置处理程序，相同的代码适用于文本答案

【问题标题】：jquery: $(input).keydown fails to set handler on radio button, same code works for textjquery：$(input).keydown 无法在单选按钮上设置处理程序，相同的代码适用于文本
【发布时间】：2015-02-09 23:39:50
【问题描述】：

我有一个很长的表单，它被分成 jquery 手风琴面板中的部分。当用户在一个面板中填写完表格后，他们会转到下一个面板并在那里填写表格。手风琴将长形分解为多个步骤。但是，当用户在一个面板上完成最后一个输入时，按下 tab 键不会将他们带到下一个面板中的下一个字段，除非我以编程方式进行。对于文本类型的输入，以下代码运行良好。但是，在输入是无线电类型的地方，它不起作用。以下代码首先将 keydown 函数分配给文本框，然后未能将其分配给一组三个单选按钮，然后再次成功将其分配给文本框。

令人沮丧的是，如果我将中间块复制并粘贴到 chrome javascript 控制台中，它就会像魅力一样工作。

那么，有什么问题呢？

document.onReady(function(){
            $('#f-phone').keydown(function(e){
                 var code = e.keyCode || e.which;
                 if ( code === 9) {
                 my_accordion.accordion("option", "active", 3);
                 }
             });

            $('input[name=shipping_method]').keydown(function(e){
                 var code = e.keyCode || e.which;
                 console.log('code is '+code);
             });

            $('#f-special_instructions').keydown(function(e){
                 var code = e.keyCode || e.which;
                 if ( code === 9) {
                 my_accordion.accordion("option", "active", 5);
                 }
             });
});

HTML 如下：

<div class="row">
  <label class="req" for="f-shipping_phone" id="label-shipping-phone">Phone (Recipient)<span style="color:red;">*</span> </label>
  <input type="text" name="shipping_phone"  size="35" maxlength="35" autocomplete="telephone-full" class="addr_phone" id="f-shipping_phone" />
</div>
<h2 id="ship-options" id="h2_shipping">Shipping Options</h2>
<div class="rowSet" id="checkout-shipping-level">
<div class="row" id="shipping_type">
    <table cellpadding="0" cellspacing="0" style="width:300px">
    <caption>Times are estimates once shipped.</caption>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="4" id="ship4" >
    </td> <td>
    <label for="ship4">Standard</label>
    </td>
    </tr>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="7" id="ship7" checked="checked">
    </td> <td>
    <label for="ship7">Saver</label>
    </td>
    </tr>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="2" id="ship2" >
    </td> <td>
    <label for="ship2">Expedited</label>
    </td>
    </tr>
    </table>
</div>

【问题讨论】：

我会将 keydown 处理程序放在整个表单上。当它检测到 div 中的最后一个元素时，然后移动到下一个。

标签： javascript jquery html forms

【解决方案1】：

这是更新后的 jQuery 脚本：

$(document).ready(function(){
$('#f-phone').keydown(function(e){
    var code = e.keyCode || e.which;
    if ( code === 9) {
        my_accordion.accordion("option", "active", 3);
    }
});

$('input:radio[name=shipping_method]').keydown(function(e){
    var code = e.keyCode || e.which;
    console.log('code is '+code);
    alert('code is '+code);
});

$('#f-special_instructions').keydown(function(e){
    var code = e.keyCode || e.which;
    if ( code === 9) {
        my_accordion.accordion("option", "active", 5);
    }
}); });

你可以在fiddler中查看：here

您仅将“keydown”事件附加到单选按钮。您不妨将“单击”或“更改”事件附加到单选按钮。

【讨论】：

感谢您提供此代码。我将它复制并粘贴到我的 document.ready 处理程序中，它似乎并没有比我的原始代码更好。我的猜测是添加 ':radio' 不会增加任何内容，因为选择器已经正确且没有它就足够了。如果它在提琴手中工作，那么它必须与在控制台线路上输入时相同，对吧？ doc.ready 处理程序将 onkeydown 处理程序附加到其他输入，这些单选按钮有什么问题？
你试过把“document.onReady(function()”改成“$(document).ready(function()”吗
哦，问题中的“onReady”是一个错字。该代码实际上是您所建议的。
您使用的是哪个版本的 jQuery 库？可以尝试使用下面的确切代码： $(document).ready(function(){ $('input:radio[name=shipping_method]').keydown(function(e){ var code = e.keyCode || e.其中; console.log('code is '+code); alert('code is '+code); }); });
还要检查页面上是否还有其他javascript错误。

【解决方案2】：

我注意到，即使我通过 javascript 控制台应用处理程序，它也会在关闭该手风琴面板时消失。所以，我相信没有解决方案，除非它处理不同级别的击键，正如一位评论者所发布的那样。

【讨论】：