Wordpress + Gravity Forms Ajax + Swup JS答案

【问题标题】：Wordpress + Gravity Forms Ajax + Swup JSWordpress + Gravity Forms Ajax + Swup JS
【发布时间】：2020-06-17 21:46:38
【问题描述】：

我正在使用 swup.js 进行页面转换和通过 AJAX 更改内容。不幸的是，重力表单似乎不能很好地处理 AJAX 请求，并且我的表单在转换后无法正常工作。

我正在使用以下内容在页面加载时重新初始化我的脚本：

document.addEventListener('swup:pageView', (event) => {
// code 
})

我可以在 javascript 中重新初始化任何函数，以便重力表单在每个页面转换时重新初始化吗？在文档中找不到任何内容。

【问题讨论】：

标签： javascript ajax wordpress gravity-forms-plugin

【解决方案1】：

最终使用 SwupFormsPlugin 和 Contact Form 7 与以下内容

document.addEventListener('DOMContentLoaded', function (event) {
  var domain = window.location.origin // HACK: makes link selector relative
  var isMobile = window.innerWidth < 800
  if (isMobile) {
  } else {
    var swup = new Swup({
      plugins: [
        new SwupOverlayTheme({
          color: '#eff6fb',
          duration: 3000,
          direction: 'to-bottom',
        }),
        new SwupBodyClassPlugin(),
        new SwupFormsPlugin({ formSelector: 'form.wpcf7-form' }),
        new SwupScrollPlugin({
          doScrollingRightAway: false,
          animateScroll: true,
          scrollFriction: 0.3,
          scrollAcceleration: 0.04,
        }),
      ],
      FORM_SELECTOR: 'form.wpcf7-form',
      LINK_SELECTOR: 'a[href*="'.concat(
        domain,
        '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
      ),
    })
    swup()
  }
})
function domReady (callback) {
  document.readyState === 'interactive' || document.readyState === 'complete'
    ? callback()
    : document.addEventListener('DOMContentLoaded', callback)
}
export { domReady }

首页它可以帮助任何人

【讨论】：

【解决方案2】：

我知道帖子的日期很远，但是这个问题突然出现在我面前，以防你找不到答案，

尝试使用此代码，这将观察任何适用于主体 DOM 的更改，并会触发您想要的任何内容：

<script>
    $(document).on('DOMSubtreeModified', 'body', function (el) {
        console.log('body content changed');
        // append you init code here
    });
</script>

告诉我这是否有效。

【讨论】：

问题主要在于如何触发 GF 初始化功能，而不是如何知道页面何时发生变化。在我的问题中，基本上我正在寻找可以在控制台中运行的行来初始化重力表单。