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

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

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

您将console.log("hello")替换为重置格式的任何地方。

Answer 2

问题的根源是您的模板已启用AJAX加载。目前有几个普遍接受的方式来解决这个问题作为一个Squarespace开发商：

禁用AJAX加载
在一个方式将在初始站点的负载和每当“AJAX负荷”发生运行点。

Option 1 - Disable AJAX：

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

选项2 - 有多种方式，开发人员接近这一点，包括：

<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在Squarespace中仅被调用一次

2 个答案: