JavaScript 仅在 Squarespace 中被调用一次

Question

我的 SquareSpace 网站上有一些自定义 JavaScript，它可以处理产品标题，这超出了 SquareSpace 的默认样式编辑器所能做的。它在最初加载页面时有效 ( https://www.manilva.co/catalogue-accessories/ )，但如果您单击左侧的任何类别，样式将重置为默认样式。

我假设 JavaScript 被 SquareSpace 样式覆盖，但我不知道为什么。也许我在错误的地方调用了函数？

任何建议都会有所帮助。

谢谢!

当前代码:

document.querySelectorAll(".ProductList-filter-list-item-link".forEach(i=>i.addEventListener("click", function()
  {
      var prodList = document.querySelectorAll("h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    var text = prodList[i].innerText;
    var index = text.indexOf('-');
    var lower = text.substring(0, index);
    var higher = text.substring(index + 2);
    prodList[i].innerHTML = lower.bold() + "<br>" + higher;

  });

Answer 1

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

1. 禁用 AJAX 加载
2. 将你的 javascript 函数写在将在初始站点加载时以及每当发生“AJAX 加载”时运行的方式。
   
   

Option 1 - Disable AJAX :

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

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

开发人员可以通过多种方式解决此问题，包括以下通过 sitewide code injection 添加的方式:

<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 页面上运行您的代码加载(有一些异常(exception)，具体取决于您使用的方法)。