キーボードでjQueryトリガー.click（）を選択した場合

Question

フォーム入力のある表があり、表の下部に「行を追加」ボタンがあります。私の問題は、入力ボックスから始めて、タブを押して<a>行を追加ボタンに移動することです。リンクが選択された状態でEnterキーを押すと、私のがトリガーされません。

ボタンをクリックしたとき、またはタブオーバーして入力したときに、どのように機能をトリガーすることができますか？

、このデモを参照してください：私はボタンが強調表示されているちょうどその時、この機能を起動するために、ページ上の任意の場所に入力したくない、あなたが強調表示されたリンク

に入るヒット https://jsfiddle.net/kpkammer/ftdez3rb/

UPDATE

を

Answer 1

クリックはマウスのクリックとタップのみを処理します。入力を検出するには、ハンドラに以下を追加する必要があります：

$('#add_row').click(function() { 
 
\t console.log("add"); 
 
}); 
 
$('#add_row').keypress(function(e) { 
 
    if(e.which == 13) { 
 
     console.log("add"); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<input /><br> 
 
<a id="add_row" class="btn btn-default pull-left" tabindex="0">Add Row</a>

ユーザープレスがボタンの上に入力したときにチェックします。単一のメソッドに両方を結合するには、あなたが使用することができます。

$('#add_row').on('click keypress', function(e) { 
 
    if (e.type == 'click' || e.which == 13) { 
 
    console.log('add'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<input /><br> 
 
<a id="add_row" class="btn btn-default pull-left" tabindex="0">Add Row</a>

（[HTML を押すと入力します上のクリックで起動する]の

Answer 2

あなたがリンクするのではなく、そのボタンにすることができ、それが動作します

$('#add_row').click(function() { 
 
\t console.log("add"); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<input /><br> 
 
    <button id="add_row" class="btn btn-default pull-left" tabindex="0">Add Row</button>