如何改写JavaScript使其在Squarespace的Ajax加载场景下正常运行

开启Ajax加载功能的Squarespace站点在页面跳转时不会触发完整的页面重载，仅会替换页面主体内容区域。原有代码绑定在$(document).ready()中的逻辑仅会在首次进入站点时执行一次，后续通过Ajax加载的新页面中的h3元素无法被原有逻辑处理，因此只有手动刷新页面后才能生效。

将原有逻辑封装为可重复调用的函数，同时监听Squarespace内置的Ajax加载完成事件，每次新内容加载后自动重新执行初始化逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// 折叠功能初始化逻辑
function initFoldEffect() {
  const $titleEls = $('.markdown-block .sqs-block-content h3');
  // 清除已绑定的点击事件，避免重复绑定
  $titleEls.css('cursor','pointer').off('click');
  // 设置默认折叠状态
  $titleEls.nextUntil("h3").slideToggle();
  // 绑定点击切换折叠事件
  $titleEls.click(function(){
    $(this).nextUntil("h3").slideToggle();
  });
}

// 首次页面加载完成后执行
$(document).ready(function(){
  initFoldEffect();
});

// 监听Squarespace Ajax加载完成事件，每次加载新页面后重新执行初始化
window.addEventListener('DOMContentLoaded', function() {
  if (window.Squarespace) {
    window.Squarespace.onInitialize(Y, function() {
      initFoldEffect();
    });
  }
});
</script>

代码说明 #

• 若你的站点已经默认加载了jQuery，可以删除第一行的jQuery引入代码，避免重复加载影响页面性能
• 代码中加入了事件解绑逻辑，避免同一元素被多次绑定点击事件导致折叠动画重复触发

如果不需要每次加载页面都重复执行初始化逻辑，也可以用事件委托的写法，仅需执行一次即可适配所有Ajax动态加载的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 绑定全局样式生效逻辑
  $(document).on('mouseover', '.markdown-block .sqs-block-content h3', function() {
    $(this).css('cursor', 'pointer');
  });
  // 动态识别新增的h3元素，设置默认折叠
  $(document).on('DOMNodeInserted', '.markdown-block .sqs-block-content h3', function() {
    $(this).nextUntil("h3").hide();
  });
  // 全局委托点击事件，所有新增的h3元素都会触发折叠逻辑
  $(document).on('click', '.markdown-block .sqs-block-content h3', function(){
    $(this).nextUntil("h3").slideToggle();
  });
});
</script>

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