javascript - 使用ajax在表单外部提交带有按钮的表单

Question

我尝试使用 ajax 发布表单，但当前代码无法正常工作。当我按下保存按钮时，表单被提交了 n + 1 次。即刷新页面后提交一次，下次我提交两个表单被提交，第三次......等等。

我已经花了很多时间研究这个问题(2 天)，但我还没有找到与我所问的问题非常相似的问题。

我在这里的学习曲线很陡，所以我希望有人能指出我做错了什么。

我想我可能搞混了。提交的步骤是。

1. 正在填写表单值。
2. 按下按钮以显示模态以确认提交表单(提交按钮实际上位于此模态内而不是表单本身内)。
3. 表单已提交。

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide'); // close confirm modal
  $('#newForm').submit(function (e) {
    e.preventDefault();
    let formData = $(this).serialize();
    
    $.post({
      type: 'POST',
      url: '/api/pois/',
      data: formData
    })

<form id="newForm">
  <input type="text" id="name" name="name">
  <input type="text" id="company" name="company">
</form>
    
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="submit" class="btn btn-success" form="newForm" id="confirmYes">Save</button>
</div>

Answer 1

问题是因为您在每次点击时都创建了一个新的 submit 事件处理程序。根据您想要执行的操作的描述，您需要在页面加载时创建一个提交处理程序，并在单击按钮时触发它。像这样:

$('#newForm').submit(function(e) { // handle the submit event
  e.preventDefault();
  let formData = $(this).serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  })
})

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide');
  $('#newForm').submit(); // trigger the submit event
});