Divi主题WordPress站点JS首次加载不执行问题求助

问题根源 #

Divi主题采用AJAX异步加载页面内容的机制，普通的window.onload、DOMContentLoaded或jQuery ready事件仅在初始页面加载时触发一次，但Divi在页面切换或首次渲染时会动态生成DOM元素（比如你的.svg-container及内部g元素），导致脚本执行时目标元素还未存在，绑定的事件自然无法生效。隐身模式下浏览器禁用缓存，Divi的加载逻辑更严格，直接导致脚本找不到目标元素，完全无法运行。

方案1：事件委托（推荐） #

事件委托无需等待目标元素生成，只需将事件绑定到始终存在的父元素（比如document），当事件冒泡到父元素时再判断目标元素是否匹配，适配动态生成的元素。

修改后的代码：

// 绑定到document，确保父元素始终存在
document.addEventListener('click', function(e) {
  // 匹配目标Kreis元素
  const kreis = e.target.closest('.svg-container g[id^="Kreis"]');
  if (!kreis) return;

  const content = getTooltipContent(kreis.id);
  const infoContainer = document.getElementById('info-container');
  const infoText = document.getElementById('info-text');
  const svgContainer = document.querySelector('.svg-container');

  infoText.innerHTML = content;

  if (window.innerWidth <= 768) {
    infoContainer.classList.add('info-container-mobile-active');
  } else {
    infoContainer.classList.add('active');
    svgContainer.classList.add('active');
  }
});

function getTooltipContent(id) {
  let content = '';

  switch (id) {
    case 'Kreis1':
      // 替换为你的实际内容
      content = 'Kreis1的提示文本';
      break;
    // 其他case逻辑
    default:
      content = ''; 
  }

  return content; 
}

方案2：监听Divi自定义加载事件 #

Divi提供了et_core_page_resource_loaded自定义事件，当页面动态内容完全渲染完成时触发，可在该事件中初始化脚本，同时兼容初始页面加载场景。

// 监听Divi动态加载完成事件
document.addEventListener('et_core_page_resource_loaded', initTooltip);
// 初始页面加载也执行一次
window.addEventListener('load', initTooltip);

function initTooltip() {
  const kreise = document.querySelectorAll('.svg-container g[id^="Kreis"]');
  const infoContainer = document.getElementById('info-container');
  const infoText = document.getElementById('info-text');
  const svgContainer = document.querySelector('.svg-container');

  // 先移除旧元素的事件绑定，避免重复触发
  kreise.forEach(kreis => {
    kreis.replaceWith(kreis.cloneNode(true));
  });

  // 重新获取元素并绑定事件
  document.querySelectorAll('.svg-container g[id^="Kreis"]').forEach(kreis => {
    kreis.addEventListener('click', () => {
      const content = getTooltipContent(kreis.id);
      infoText.innerHTML = content;

      if (window.innerWidth <= 768) {
        infoContainer.classList.add('info-container-mobile-active');
      } else {
        infoContainer.classList.add('active');
        svgContainer.classList.add('active');
      }
    });
  });
}

function getTooltipContent(id) {
  let content = '';

  switch (id) {
    case 'Kreis1':
      content = 'Kreis1的提示文本';
      break;
    // 其他case逻辑
    default:
      content = ''; 
  }

  return content; 
}

方案3：用MutationObserver监听DOM变化 #

如果前两种方案不生效，可通过MutationObserver检测目标父元素是否生成，再执行初始化逻辑：

// 创建观察者实例，监听body的DOM变化
const observer = new MutationObserver(function(mutations) {
  const svgContainer = document.querySelector('.svg-container');
  if (svgContainer) {
    initTooltip();
    observer.disconnect(); // 找到元素后停止监听
  }
});

// 开始观察body的子元素及后代变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

function initTooltip() {
  const kreise = document.querySelectorAll('.svg-container g[id^="Kreis"]');
  const infoContainer = document.getElementById('info-container');
  const infoText = document.getElementById('info-text');
  const svgContainer = document.querySelector('.svg-container');

  kreise.forEach(kreis => {
    kreis.addEventListener('click', () => {
      const content = getTooltipContent(kreis.id);
      infoText.innerHTML = content;

      if (window.innerWidth <= 768) {
        infoContainer.classList.add('info-container-mobile-active');
      } else {
        infoContainer.classList.add('active');
        svgContainer.classList.add('active');
      }
    });
  });
}

function getTooltipContent(id) {
  let content = '';

  switch (id) {
    case 'Kreis1':
      content = 'Kreis1的提示文本';
      break;
    // 其他case逻辑
    default:
      content = ''; 
  }

  return content; 
}

额外注意事项 #

• 建议将脚本移到主题选项的页脚区域，而非页面主体，确保DOM元素生成后再加载脚本。
• 隐身模式下的问题本质是无缓存导致动态加载延迟，事件委托或MutationObserver方案能更好适配这种场景。

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