Question

我有一个带表格输入的表格，在表格底部，我有一个＆＃34;添加行＆＃34;按钮。我的问题是我在输入框中开始，然后按Tab键移动到此<a>添加行按钮。当我点击输入并选择了链接时，它不会触发我的.click(function ()。

如何在点击按钮时触发功能，或者当它被选中并且您点击进入时会触发功能？

请参阅此演示：https://jsfiddle.net/kpkammer/ftdez3rb/

更新

我不想在页面的任何位置输入以触发此功能，只需突出显示按钮并在突出显示的链接上按Enter键

Answer 1

点击仅处理鼠标点击和点击。要检测回车，您需要将以下内容添加到处理程序：

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

这将检查用户按下按钮上的输入。要将两者结合到一个方法中，您可以使用：

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

Answer 2

您可以将其设为按钮而不是链接，它将起作用

$('#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触发.click（）

2 个答案: