单击相同HTML结构中的按钮？

Question

当在文本字段中按回车键时，我试图防止换行，而是单击保存按钮。

我有多种具有相似布局的表格。我尝试使用'.comment-form textarea'选择textarea，然后需要在与:button[value="Save"]相同的.comment-form下单击textarea。

我也包括了我的测试jQuery，这会停止换行，但不会单击按钮。当加载多个表单时，它也没有区别。我也尝试使用parents查找.comment-form，但这也不起作用。

jQuery(document).ready(function($) {
  $('.comment-form textarea').keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault();
      jQuery(this).blur();
      jQuery(':button[value="Save"]').focus().mousedown();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-wrapper">
  <form class="comment-form">
    <div class="inner-comment-form">
      <div class="row">
        <div class="col-1">...</div>
        <div class="col-11 ">
          <div class="form-group">
            <label>Comment </label>
            <div class="form-textarea-wrapper">
              <textarea class="form-textarea" placeholder="Comment"></textarea>
            </div>
          </div>
        </div>
      </div>
      <input name="token">...</input>
      <input name="form-id">...</input>
      <input name="access-id">...</input>
      <div class="author form-group">...</div>
      <div class="form-actions form-wrapper form-group" id="edit-actions">
        <button type="submit" value="Save" class="btn btn-success">Save</button>
        <button type="submit" value="Cancel" class="btn btn-default">Cancel</button>
      </div>
    </div>
</div>

Answer 1

为了完成这项工作，您可以使用closest()来获取父级form元素，然后使用submit()。

jQuery($ => {
  $('.comment-form textarea').on('keypress', function(e) {
    if (e.which == 13) {
      e.preventDefault();
      $(this).closest('form').submit();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-wrapper">
  <form class="comment-form">
    <div class="inner-comment-form">
      <div class="row">
        <div class="col-1">...</div>
        <div class="col-11 ">
          <div class="form-group">
            <label>Comment </label>
            <div class="form-textarea-wrapper">
              <textarea class="form-textarea" placeholder="Comment"></textarea>
            </div>
          </div>
        </div>
      </div>
      <input name="token" />...
      <input name="form-id" />...
      <input name="access-id" />...
      <div class="author form-group">...</div>
      <div class="form-actions form-wrapper form-group" id="edit-actions">
        <button type="submit" value="Save" class="btn btn-success">Save</button>
        <button type="button" value="Cancel" class="btn btn-default">Cancel</button>
      </div>
    </div>
  </form>
</div>