javascript - 为什么javascript-ajax多次提交表单

Question

我正在做单页应用程序。如果我在表单上输入内容并单击提交按钮，那么它会发送一个请求。第二次，如果我键入内容并单击它会发送两个请求。第三次它发送三个请求，依此类推。为什么是这样？我在javascript代码中做错了吗？

这是我的html

function reply_mail(idi) {
  document.querySelector('#emails-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';
  document.querySelector('#reply-view').style.display = 'block';
  fetch(`/emails/${idi}`)
    .then(response => response.json())
    .then(email => {
      // Print email
      var strp = `${email.subject}`;
      var ini = 'Re: '
      document.querySelector('#reply-recipients').value = `${email.sender}`;
      if (strp.slice(0, 4) == 'Re: ') {
        document.querySelector('#reply-subject').value = `${strp}`;
      } else {
        document.querySelector('#reply-subject').value = ini.concat("", strp);
      }
      var output = `On ${email.timestamp}  ${email.sender} wrote:|
          ${email.body} |
          `;
      // ... do something else with email ...
      document.querySelector('#reply-body').value = output;
      // ... do something else with email ...
      console.log(email);

    });
  document.querySelector('#reply-submit').addEventListener('click', function(event) {
    event.preventDefault();
    rec = document.querySelector('#reply-recipients').value;
    sub = document.querySelector('#reply-subject').value;
    bod = document.querySelector('#reply-body').value;
    fetch('/emails', {
        method: 'POST',
        body: JSON.stringify({
          recipients: rec,
          subject: sub,
          body: bod
        })
      })
      .then(response => response.json())
      .then(result => {
        // Print result
        if ('error' in result) {
          console.log(result);
          document.querySelector('#reply-error').style.display = 'block';
          document.querySelector('#reply-error-i').innerHTML = `<p>${result['error']}</p>`;
        } else {
          console.log(result);
          document.querySelector('#reply-error').style.display = 'none';
          load_mailbox('sent');
        }
      });
  })
}

```
<div id="reply-view">
  <h3>New Email</h3>
  <div class="alert alert-danger" role="alert" id="reply-error">
    <div id="reply-error-i">
    </div>
  </div>
  <form id="reply-form">
    <div class="form-group">
      From: <input disabled class="form-control" value="[e-mail]">
    </div>
    <div class="form-group">
      To: <input id="reply-recipients" class="form-control">
    </div>
    <div class="form-group">
      <input class="form-control" id="reply-subject" placeholder="Subject">
    </div>
    <textarea class="form-control" id="reply-body" placeholder="Body"></textarea>
    <input type="submit" id="reply-submit" class="btn btn-primary" />
  </form>
</div>

标签： javascriptajax