尽管有 Ajax，如何重写 javascript 以强制它加载？答案

【问题标题】：How to rewrite javascript to force it to load despite Ajax?尽管有 Ajax，如何重写 javascript 以强制它加载？
【发布时间】：2021-07-29 06:37:58
【问题描述】：

我有以下 javascript 代码，问题是我正在处理的 Squarespace 网站需要 Ajax 加载。因此，只有在加载后刷新页面时，此代码才有效。更多关于这个问题在这里https://forum.squarespace.com/topic/87058-why-doesnt-my-javascript-code-work-until-i-refresh-the-page/

我将不胜感激任何关于如何重写它的指针，以便它在 Ajax 的情况下加载。当我禁用 Ajax 时，它的效果非常好，但不幸的是，我需要打开它，以使网站的其他部分看起来不错。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>

【问题讨论】：

这能回答你的问题吗？ Event binding on dynamically created elements?
这看起来很有希望，但我不知道如何切换我的代码才能使用它。
@cloned 这仅对事件有帮助，但不会影响显示的 css() 或 slideToggle()
你的ajax是怎么做的？当元素实际存在时，需要在它完成后调用其中的一些
CSS 无论如何都应该在 CSS 中设置，而不是通过 jQuery。数据加载完成后需要调用 slidetoggle，但我们不知道这是如何完成的。

标签： javascript jquery ajax squarespace

【解决方案1】：

这是一个常见问题，there are several common ways that developers approach the solution。

在你的情况下，通过sitewide code injection插入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.Squarespace.onInitialize(Y, function() {
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(this).nextUntil("h3").slideToggle();
  });
});
</script>

【讨论】：