JQuery代码仅对现有地址字段生效，如何适配用户新增的地址字段？

问题原因 #

• 你使用的document.querySelector只会匹配页面中第一个带有.autocomplete类的元素，就算存在多个已有的地址字段也只能生效第一个
• 代码仅在页面初始加载完成时执行一次，后续用户动态新增的地址字段不会被自动识别和初始化

解决方案 #

方案1：封装初始化函数，新增字段时主动调用（最推荐，性能最优） #

先把初始化逻辑封装为可复用函数，避免重复代码：

// 封装通用的地址自动完成初始化函数
function initAutocomplete(elements = null) {
  // 传入指定元素则仅初始化传入元素，否则初始化所有未初始化的.autocomplete字段
  const targetEls = elements || document.querySelectorAll('.autocomplete:not(.autocomplete-initialized)');
  targetEls.forEach(el => {
    // 加标记避免重复初始化导致异常
    el.classList.add('autocomplete-initialized');
    loadGooglePlaces(el, {
      types: ['geocode'],
    });
  })
}

// 页面加载完成后初始化已有的地址字段
$(document).ready(function () {
  initAutocomplete();
});

在你新增地址字段的逻辑里，插入完新的输入框后主动调用初始化函数即可，示例：

// 假设这是你的新增地址字段逻辑
function addNewAddressField() {
  const newInput = document.createElement('input');
  newInput.classList.add('autocomplete');
  // 输入框插入页面的逻辑
  document.querySelector('#address-container').appendChild(newInput);
  // 新增完成后直接初始化这个新输入框
  initAutocomplete(newInput);
}

方案2：监听DOM变动自动识别新增元素（适配无法修改新增逻辑的场景） #

如果没法修改原有新增地址字段的代码，可以用MutationObserver监听DOM变化，自动识别新增的对应元素完成初始化：

$(document).ready(function () {
  // 先初始化页面已有的地址字段
  document.querySelectorAll('.autocomplete:not(.autocomplete-initialized)').forEach(el => {
    el.classList.add('autocomplete-initialized');
    loadGooglePlaces(el, {types: ['geocode']});
  });

  // 监听DOM变动自动处理新增字段
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 遍历所有新增节点
      mutation.addedNodes.forEach(node => {
        // 新增节点本身就是.autocomplete的情况
        if(node.nodeType === 1 && node.classList?.contains('autocomplete') && !node.classList.contains('autocomplete-initialized')) {
          node.classList.add('autocomplete-initialized');
          loadGooglePlaces(node, {types: ['geocode']});
        }
        // 新增节点内部包含.autocomplete的情况
        if(node.nodeType === 1 && node.querySelectorAll) {
          node.querySelectorAll('.autocomplete:not(.autocomplete-initialized)').forEach(el => {
            el.classList.add('autocomplete-initialized');
            loadGooglePlaces(el, {types: ['geocode']});
          })
        }
      })
    })
  });

  // 可把监听范围从document.body缩小到地址字段的父容器，进一步提升性能
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

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