在我在表单字段之外单击之前，不会触发更改事件

Question

我有两个用此jQuery代码控制的表单字段

这是html代码

$('form :input').change(function() {
  var pickup = $("#pickup").val();
  var destination = $("#destination").val();

  if (pickup !== "" && destination !== "") {
    console.log("all filed");
  } else {
    console.log("change but not filled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="order">
  <div class="form-group col-md-6 ">
    <label for="pickup">Pickup Location</label>
    <input type="text" name="pickup" id="pickup" class="form-control form-field" placeholder="Pickup Location" required>
  </div>
  <div class="form-group col-md-6 ">
    <label for="destination">Destination</label>
    <input type="text" class="form-control form-field" id="destination" name="destination" placeholder="Destination" required>
  </div>
  <hr/>
  <div class="form-group col-md-12 ">
    <button type="button" class="form-control btn btn-success" disabled>Confirm Order</button>
  </div>
</form>

当我用一些数据填充字段并且我同时填充了两个字段时，将立即引发两个表单字段被填充的事件，但是当我删除任何表单字段中的某些数据时，我必须在触发事件的表单字段。有什么方法可以确保事件立即触发？。

更新为包含Places API

var pickup = document.getElementById('pickup');
var destintion = document.getElementById('destination');
var options = {componentRestrictions: {country: 'nl'}};

new google.maps.places.Autocomplete(pickup, options);
new google.maps.places.Autocomplete(destination, options);

$('form :input').on('input', function() { 
   var pickup = $("#pickup").val();
   var destination = $("#destination").val();

   if(pickup !== "" && destination !== "") {
   console.log("all filed");
   }
   else{
   console.log("change but not filled");
   }
}); 

Answer 1

您可以尝试以下代码：

$('form :input').on('input', function() {
  var pickup = $("#pickup").val();
  var destination = $("#destination").val();

  if (pickup !== "" && destination !== "") {
    console.log("all filed");
  } else {
    console.log("change but not filled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="order">
  <div class="form-group col-md-6 ">
    <label for="pickup">Pickup Location</label>
    <input type="text" name="pickup" id="pickup" class="form-control form-field" placeholder="Pickup Location" required>
  </div>
  <div class="form-group col-md-6 ">
    <label for="destination">Destination</label>
    <input type="text" class="form-control form-field" id="destination" name="destination" placeholder="Destination" required>
  </div>
  <hr/>
  <div class="form-group col-md-12 ">
    <button type="button" class="form-control btn btn-success" disabled>Confirm Order</button>
  </div>
</form>