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

Question

当在文本字段中按return时，我正在尝试防止换行符，而不是单击保存按钮。

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

我还包含了我的测试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()。

同样值得注意的是，还有一些其他问题需要解决。首先，<input />元素没有结束标记，它们是自动关闭的。此外，“取消”按钮是type="submit"，这似乎非常奇怪。我假设这应该放在一个type="button"中，这样它就不会保存表单中的数据(这是取消操作的主要目的)。最后，您的超文本标记语言缺少一个</form>标记，但我猜这只是创建问题时的一个疏忽。

说了这么多，试试这个：

​

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>

​