jquery：$（輸入）.keydown無法在單選按鈕上設置處理程序，相同的代碼適用於文本

Question

我有一個很長的窗體，它被分成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> 

Answer 1

我注意到，即使我通過javascript控制檯應用處理程序，它將在關閉該手風琴面板時消失。所以，我相信這個問題沒有解決方案，除非它是在一個不同的層面上處理按鍵，就像一個評論員發佈的那樣。

Answer 2

這裏是更新的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); 
    } 
}); }); 

您可以檢查它在小提琴手：here

你只連接 「的keydown」事件到單選按鈕。您不妨將「點擊」或「更改」事件附加到單選按鈕上。