按下 enter 后单击 table 内的下一步按钮

Question

我有一个 table，旁边有输入和按钮。

在输入中按下回车键时，应单击相应的按钮。

$('.inputs').keydown(function (e) {
    if (e.which === 13) {
     $(this).find('.btn').click(function() {
       alert( "clicked" );
      });
    }
});

jsfiddle

Answer 1

这里的问题是在 Enter 按键上，您实际上是在添加一个 click 事件列表，但实际上并没有触发按钮点击。您可以通过将 click 事件侦听器放在外部并在进入时触发该事件来修复它。

此外，

$(this).find('.btn')

逻辑不正确，因为 .inputs 在 td 里面，而 .btn 在另一个 td 里面，所以 $(this).find('.btn') 什么也给不了你因为 .inputs 元素中没有 .btn 元素。

您可以改用这个：

$(this).closest('tr').find('.btn')

这将为当前 .inputs 元素找到 closest table 行 tr，然后使用 [= 在该行中找到 .btn 元素27=].

演示：

$('.inputs').keydown(function(e) {
  if (e.which === 13) {
    $(this).closest('tr').find('.btn').click()
  }
});

$('.half').on('click', '.btn', function() {
  alert("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="half">
  <tr>
    <td>
      <input class="inputs" name="ragsoc" type="text" class="text-sx" id="ragsoc" value="" />
    </td>
    <td class="tdocra c_white b"><a href="" class="btn">BUTTON</a></td>
  </tr>
  <tr>
    <td>
      <input class="inputs" name="ragsoc" type="text" class="text-sx" id="ragsoc" value="" />
    </td>
    <td class="tdocra c_white b"><a href="" class="btn">BUTTON</a></td>
  </tr>
  <tr>
    <td>
      <input class="inputs" name="ragsoc" type="text" class="text-sx" id="ragsoc" value="" />
    </td>
    <td class="tdocra c_white b"><a href="" class="btn">BUTTON</a></td>
  </tr>
</table>

Answer 2

是否可以使用在按下回车键或单击按钮时调用的单个函数？

function doSomething(){
  alert('clicked');
}

$('.inputs').keydown(function (e) {
    if (e.which === 13) {
     doSomething();
});

$(".btn").click(function(e){
  e.preventDefault();
  doSomething();
}

按下 enter 后单击 table 内的下一步按钮

click next button inside table when enter is pressed

javascript

jquery

keydown