咨询：如何让JavaScript代码在WordPress的AJAX表单中正常运行

问题原因 #

普通JavaScript代码只在页面初始加载时执行一次，当表单改为AJAX提交后，表单区域会被重新渲染，原有的.example元素可能被替换，导致初始执行的代码无法作用到新生成的DOM元素上。

解决方案 #

1. 封装逻辑为可复用函数 #

先把插入内容的代码封装成函数，方便后续重复调用：

function insertExampleContent() {
  const targetElement = document.querySelector('.example');
  if (targetElement) {
    targetElement.innerHTML = '<img src="/wp-content/uploads/2022/09/svg1.svg" class="elementor img" alt="example"/><br/><span class="dptitle">example</span>';
  }
}

2. 利用Formidable Forms的AJAX事件触发 #

Formidable Forms提供了AJAX表单完成后的专属事件frmFormComplete，我们可以监听这个事件，在表单提交完成后重新执行函数：

// 页面初始加载时执行一次
document.addEventListener('DOMContentLoaded', insertExampleContent);

// 监听AJAX表单完成事件
document.addEventListener('frmFormComplete', function(event) {
  // 可选：只针对特定表单执行，替换为你的表单ID
  // if (event.detail.formId === 123) {
    insertExampleContent();
  // }
});

3. 备选方案：监听DOM变化（MutationObserver） #

如果上述事件未生效，可以用MutationObserver监听表单父元素的DOM变化，当元素被重新渲染后自动执行函数：

function insertExampleContent() {
  const targetElement = document.querySelector('.example');
  if (targetElement) {
    targetElement.innerHTML = '<img src="/wp-content/uploads/2022/09/svg1.svg" class="elementor img" alt="example"/><br/><span class="dptitle">example</span>';
  }
}

// 初始加载执行
insertExampleContent();

// 监听表单父元素的DOM变化，替换为实际的父元素选择器
const parentContainer = document.querySelector('.frm_form_container');
if (parentContainer) {
  const observer = new MutationObserver(() => insertExampleContent());
  observer.observe(parentContainer, { childList: true, subtree: true });
}

注意事项 #

• 替换代码中的父元素选择器（如.frm_form_container）为你页面中实际的表单父元素类名或ID
• 若需针对特定表单执行，可在frmFormComplete事件中通过event.detail.formId判断表单ID
• 确保代码放在Elementor的「自定义JavaScript」区域，或页面底部的脚本位置，避免DOM未加载完成时执行

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