jQuery表单验证事件滞后问题：Google Maps API自动填充按钮状态异常

这个问题的核心在于你监听的事件时机不对——原来绑定在#autocomplete上的click/keyup/change等事件，会在Google Places API还没完成postal_code和locality字段的填充时就触发，自然会得到错误的输入框值，导致按钮状态判断异常。

Google Places Autocomplete提供了专门的place_changed事件，这个事件会在用户选择了一个地址选项，且API已经完成所有关联字段的填充操作后才触发，这才是我们应该监听的正确时机。

修改后的完整代码方案： #

首先，初始化Google Places Autocomplete时，绑定place_changed事件：

// 初始化Autocomplete
const autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('autocomplete'),
  { types: ['address'] }
);

// 监听place_changed事件（这是关键！）
autocomplete.addListener('place_changed', function() {
  const autocompleteVal = $('#autocomplete').val();
  const postalCodeVal = $('#postal_code').val().trim();
  const localityVal = $('#locality').val().trim();
  
  // 逻辑判断：
  if (autocompleteVal.length > 0) {
    // 当选择了地址，必须两个字段都有值才启用按钮
    $('button').prop('disabled', !(postalCodeVal.length > 1 && localityVal.length > 1));
  } else {
    // 未选择地址时，按钮保持启用（因为表单是可选的）
    $('button').prop('disabled', false);
  }
});

// 额外：如果用户手动修改postal_code或locality，也应该实时更新按钮状态
$(document).on('input blur', '#postal_code, #locality', function() {
  const autocompleteVal = $('#autocomplete').val();
  if (autocompleteVal.length > 0) {
    const postalCodeVal = $('#postal_code').val().trim();
    const localityVal = $('#locality').val().trim();
    $('button').prop('disabled', !(postalCodeVal.length > 1 && localityVal.length > 1));
  }
});

为什么这个方案有效？ #

1. place_changed事件的时机：用户从自动补全列表中选择地址后，API会先填充postal_code、locality等字段，然后才触发place_changed事件，此时检查输入框的值是完全准确的。
2. 额外监听字段手动修改：如果用户在自动填充后手动修改了postal_code或locality，我们也能实时更新按钮状态，保证逻辑的完整性。
3. 保留可选表单逻辑：当用户没有选择任何地址（autocomplete为空）时，按钮保持默认启用状态，符合需求。

注意事项 #

记得删除原来绑定在#autocomplete上的那些事件监听，避免逻辑冲突。

内容的提问来源于stack exchange，提问作者Horai Nuri