jQuery trigger .click() when selected by keyboard

Question

I have a table with form inputs, at the bottom of the table, I have an "Add row" button. My issue is I'm starting in an input box, and hitting tab to move to this <a> add row button. When I hit enter with the link selected it's not triggering my .click(function ().

How can I trigger a function when the button is clicked, or when it's tabbed over to and you hit enter?

See this demo: https://jsfiddle.net/kpkammer/ftdez3rb/

UPDATE

I don't want enter anywhere on the page to trigger this function, just when the button is highlighted and you hit enter on the highlighted link

Possible duplicate of [html activate on click on enter pressed](http://stackoverflow.com/questions/24258189/html-a-activate-on-click-on-enter-pressed) — Fiddles, Nov 02 '16 at 02:06

vivekprakash · Accepted Answer · 2016-11-02T02:34:57.923

Click only handles mouse clicks and Taps. To detect enter, you'll need to add the following to handler:

$('#add_row').click(function () {
 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>

This will check when a user presses enter on the button. To combine both into a single method, you can use:

$('#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>

Thank you! Any way to combine both the keypress and click into 1 function? — KPK, Nov 02 '16 at 02:30
You can use `$('#add_row').on('click keypress', funciton(e) { ... });` though you'll need to check if `e.type` is click or keypress — vivekprakash, Nov 02 '16 at 02:33
If you use a button, it just works automatically without extra code — Ruan Mendes, Nov 02 '16 at 02:57

Ruan Mendes · Answer 2 · 2016-11-02T02:57:50.660

You can make it a button instead of a link and it will work

$('#add_row').click(function () {
 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>

jQuery trigger .click() when selected by keyboard

2 Answers2