如何在动态加载的div完成后执行标准JavaScript代码？

针对你遇到的动态加载元素触发代码的问题，以下是两种基于标准JavaScript的可行方案：

方案一：使用MutationObserver（推荐，高效实时） #

MutationObserver是浏览器原生API，能监听DOM树的变化，适合检测动态添加的元素，性能优于轮询。

// 替换为你需要执行的代码
function executeAfterLoad() {
  console.log('.checkout-view-content 已加载，开始执行逻辑');
  // 这里写入你的业务代码
}

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  const targetElement = document.querySelector('.checkout-view-content');
  if (targetElement) {
    executeAfterLoad();
    // 找到元素后停止观察，避免重复触发
    observer.disconnect();
  }
});

// 配置观察选项：监听子元素增减，包含所有子树
const observerOptions = {
  childList: true,
  subtree: true
};

// 开始观察body（若知道目标元素的固定父容器，可替换为该容器以提升性能）
observer.observe(document.body, observerOptions);

方案二：使用轮询（简单兼容） #

如果对实时性要求不高，或者需要更简单的实现，可使用setInterval定期检查元素是否存在：

// 替换为你需要执行的代码
function executeAfterLoad() {
  console.log('.checkout-view-content 已加载，开始执行逻辑');
  // 这里写入你的业务代码
}

// 每200ms检查一次，可根据需求调整间隔
const checkTimer = setInterval(() => {
  const targetElement = document.querySelector('.checkout-view-content');
  if (targetElement) {
    executeAfterLoad();
    // 找到元素后清除定时器
    clearInterval(checkTimer);
  }
}, 200);

为什么之前的代码无效？ #

你之前尝试的代码大概率依赖了DOMContentLoaded或window.onload这类事件，它们仅在初始DOM加载完成时触发，无法检测后续通过点击按钮动态添加的元素，因此不会生效。

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