使用 jQuery，如何在触发表单提交事件之前等待 onChange 事件完成答案

【问题标题】：using jQuery, how to wait for onChange event to finish before form submit event is fired使用 jQuery，如何在触发表单提交事件之前等待 onChange 事件完成
【发布时间】：2019-02-08 07:01:34
【问题描述】：

假设我的网页中有一个文本框，并且我使用 jQuery 在该文本框上附加了一个“更改”事件。

$('.myFormClass').on('change', '.amount', function () {            
    // Some AJAX call here, and the response is assigned to a variable
});

我也有一个表单提交事件，

$('.myFormClass').on('submit', 'form', function (e) {
  // some code in which I use the response from the earlier AJAX call returned against 'change' event
});

问题是“更改”事件单独工作正常，但是当提交表单时，它们几乎同时被触发，直到针对“更改”事件的 AJAX 调用返回（应该是）时，表单已经那时已经提交了，所以我不能使用表单提交之前需要的 AJAX 响应。

在这种情况下有内置的 jQuery 吗？如果不是，还有其他有效的解决方案吗？

【问题讨论】：

在您的第一个 ajax 调用 success 函数中注册您的 .submit() 方法
@VasuKuncham 您的建议对我来说是无效的，因为我不想在每个onChange event 上提交表单，而是在用户打算使用常规方法实际提交表单时。

标签： javascript jquery

【解决方案1】：

存储 ajax 承诺并在表单提交处理程序中等待其解析

let amountReady = null;

$('.testForm').on('change', '.amount', function(ev) {
  amountReady = $.ajax({
    method: 'POST',
    url: 'https://httpbin.org/post',
    data: {
      amount: $(this).val()
    }
  });
});


$('.testForm').on('submit', 'form', function(e) {
  e.preventDefault();
  if (!amountReady) return;
  amountReady.then((amountAjaxResult) => {
    console.log('submit now', amountAjaxResult.form.amount);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="testForm">
  <form>
    <input type="number" class="amount" />
    <button type="submit">Submit</button>
  </form>
</div>

【讨论】：

【解决方案2】：

添加一个按钮。当用户单击按钮时，布尔值设置为 tru，如果为 true，则只会发生提交，否则只有 onchange 函数将起作用，而提交函数不起作用。

var sub=false;
$(document).ready(function(){
$('button').click(function(){sub=true;console.log(sub)})
$('.myFormClass').on('change', '.amount', function () {            
    // Some AJAX call here, and the response is assigned to a variable
    console.log('changed')
});

$('.myFormClass').keypress((e)=>{if(e.keyCode=='13'){e.preventDefault();console.log('not submitted on enter')}})
$('.myFormClass').click( function (e) {

e.preventDefault();
console.log("submit cancelled")
if(sub)
  $(this).submit();
  // some code in which I use the response from the earlier AJAX call returned against 'change' event

});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myFormClass">
aa
<input class="amount">
<input type="submit">
</form>
<button>Want to submit the form?</button>

【讨论】：

Uncaught SyntaxError: Unexpected token (
因为我还没有创建 ajax 调用。它只是说明必须调用 ajax 提交成功
哦，对不起，我的错
此解决方案不起作用，因为我不想在每个onChange 事件上提交表单，而是在用户打算使用常规方法实际提交表单时。
@AshayMandwarya 当通过 ENTER 键提交表单时，您的编辑将不起作用。

【解决方案3】：

你可以使用：

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

或者函数完成后的嵌套函数：

function test () {
    console.log('test');   
}

function test2 (callback) {
    console.log('test2');
    callback();
}


test2(test);

可能是related

【讨论】：

我也会在你的第一个解决方案上这样做
您的回答断章取义。再次检查问题。
我不确定您对我的回答有什么问题，但您明确表示：“问题是 'change' 事件单独工作正常但当表单提交时，它们几乎同时被触发，直到 当针对“更改”事件的 AJAX 调用返回时（应该是），表单已经提交到那时所以我不能使用在表单提交之前需要的 AJAX 响应。”只需使用嵌套来确保它们得到处理然后得到响应。