WordPress页面JS用setTimeout正常，用DOMContentLoaded失效的原因是什么？

问题核心原因 #

你的代码逻辑本身没有错误，无法运行通常是两个场景问题导致：

1. 目标DOM元素在DOMContentLoaded触发后才完成渲染。WordPress场景下动态区块、AJAX加载的内容、懒加载模块都会出现这种情况，你之前用的循环setTimeout相当于每隔3秒检测一次元素存在性，元素加载后下次执行就能生效，但只触发一次的DOMContentLoaded自然无法匹配后插入的元素。
2. 脚本加载时机晚于DOMContentLoaded触发时间。如果你通过wp_enqueue_script引入脚本时没有设置defer属性，或者脚本挂载在页脚位置，可能DOMContentLoaded触发时你的脚本还没执行，事件绑定直接失效。

解决方案 #

方案1：用MutationObserver监听DOM变动（最推荐）

这种方式不需要定时轮询，DOM有更新就自动执行赋值逻辑，性能更高、触发更及时：

function passengerElevator() {
  // 合并选择器简化代码
  const getProductName = document.querySelectorAll('[data-id="6657316"], [data-id="e9c06d5"]');
  getProductName.forEach(function(item) {
    const inputArea = item.querySelector('input[name=product]');
    // 加判断避免重复赋值、避免元素不存在报错
    if (!inputArea || inputArea.value) return;
    const productName = item.querySelector('.lift');
    if (productName) {
      inputArea.value = productName.innerText;
    }
  });
}

// 先执行一次，处理已经渲染完成的元素
passengerElevator();

// 监听DOM变动，有更新就重新执行逻辑
const observer = new MutationObserver(passengerElevator);
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案2：修复DOMContentLoaded绑定逻辑

如果要继续用DOMContentLoaded触发，需要先判断当前文档加载状态，避免错过事件触发时机：

function passengerElevator() {
  const getProductName = document.querySelectorAll('[data-id="6657316"], [data-id="e9c06d5"]');
  getProductName.forEach(function(item) {
    const productName = item.querySelector('.lift');
    const inputArea = item.querySelector('input[name=product]');
    if (productName && inputArea) {
      inputArea.value = productName.innerText;
    }
  });
}

// 加载状态判断，已加载完成直接执行，否则绑定事件
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", passengerElevator);
} else {
  passengerElevator();
}

同时需要调整wp_enqueue_script的注册参数，确保脚本加载时机正确：

wp_enqueue_script(
  'custom-lift-script',
  get_template_directory_uri() . '/js/你的脚本文件路径.js',
  array(),
  '1.0.0',
  [
    'strategy' => 'defer',
    'in_footer' => true
  ]
);

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