jQuery - 如何在 Ajax 表单提交中添加“或”

Question

我正在尝试在 ajax 表单上添加一项功能，以便能够同时使用 Submit Button 和 Ctrl+Enter 功能。
它有两个单独的表单，应该是原样，但必须有两个事件可用于提交 ajax 表单。
这是我到目前为止所做的：

  $(document).ready(function() {
    $(".form").on('submit keydown',(function(e) {
      e.preventDefault();
      $.ajax({
        success: function(data) {
          $('.result').html('Ajax Submit');
        },
      });
    }));
  });

<input class="search1">
  <form class="form">
    <button>Submit</button>
  </form>
  <div class="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

鉴于在问题下的 cmets 中，您声明 input 不会放在 form 元素内（尽管它真的应该是，如它对可访问性更好，而且它会在不需要 JS 干预的情况下为您解决问题），您可以通过将 keyup 事件处理程序附加到 input 元素并侦听 CTRL+返回和弦。

另请注意，您的 AJAX 请求还需要至少包含 url 和 data。

jQuery($ => {
  let $form = $('.form');
  let $search = $('.search1').on('keyup', e => {
    if (e.ctrlKey && e.keyCode === 13)
      $form.submit();
  });
  
  $form.on('submit', e => {
    e.preventDefault();
    console.log('making ajax request...');
    
    /*
    $.ajax({
      url: '/search',
      data: {
        term: $search.val()
      },  
      success: function(data) {
        $('.result').html('Ajax Submit');
      }
    });
    */
  });
});

<input class="search1">
<form class="form">
  <button>Submit</button>
</form>
<div class="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>