问题的根源在于您的模板启用了 AJAX 加载。作为 Squarespace 开发人员，目前有几种普遍接受的方法来处理这个问题：

1. 禁用 AJAX 加载
2. 编写您的 javascript 函数，使其在初始站点加载时以及发生“AJAX 加载”时运行。
   
   

选项 1 - 禁用 AJAX：

1. 在“主页”菜单中，单击“设计”，然后单击“站点样式”。
2. 向下滚动到站点：加载中。
3. 取消选中启用 Ajax 加载。

选项 2 - 在您的 JS 中使用 AJAX

开发人员可以通过多种方式来解决这个问题，包括通过全站代码注入添加的以下方法：

<script>
window.Squarespace.onInitialize(Y, function() {
  // do stuff
});
</script>

或者

<script>
(function() {
  // Establish a function that does stuff.
  var myFunction = function() {
    // Do stuff here.
  };

  // Initialize the fn on site load.
  myFunction();
  // myFunction2(); , etc...

  // Reinit. the fn on each new AJAX-loaded page.
  window.addEventListener("mercury:load", myFunction);
})();
</script>

或者

<script>
(function() {
  // Establish a function that does stuff.
  var myFunction = function() {
    // Do stuff here.
  };

  // Initialize the fn on site load.
  myFunction();

  // Reinit. the fn on each new AJAX-loaded page.
  new MutationObserver(function() {
    myFunction();
    // myFunction2(); , etc...
  }).observe(document.body, {attributes:true, attributeFilter:["id"]});
})();
</script>

大多数情况下，这些中的每一个都适用于大多数最新的（在撰写本文时）模板。每一种都有其优点和缺点，以及它们无法按预期工作的上下文（例如，在/cart/页面或其他“系统”页面上）。通过在上述方法之一的上下文中添加您的代码，并确保代码当然在所需的上下文中工作并且没有其自身的错误/问题，您将在初始站点加载和每个 AJAX 页面上运行您的代码加载（有一些例外，取决于您使用的方法）。

您的问题是单击左侧的按钮时页面不会重新加载，只是删除、添加和替换了一些元素。更改的元素不会被重新设计。单击这些按钮之一后，您将需要重新运行 JavaScript。也许是这样的：

document.querySelectorAll(
    ".ProductList-filter-list-item"
).forEach(
    i=>i.addEventListener(
        "click", ()=>console.log("hello")
    )
)

你console.log("hello")用什么来替换你的格式。