Wordpress + Gravity Forms Ajax + Swup JS

Question

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

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

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

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

Answer 1

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

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

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

告诉我这是否有效。

Answer 2

最终使用 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 }

家，它可以帮助任何人