在 Squarespace 弹出事件侦听器/触发器之后运行代码

如何解决在 Squarespace 弹出事件侦听器/触发器之后运行代码

我需要在模态弹出窗口加载到视口中之后运行一些自定义 JS 。搭载任何触发的事件的最佳方法是什么？

加载弹出窗口后，我需要执行如下操作：

jQuery(".newsletter-form[data-form-id='34li2j4j32il13l2j13ijl21i'] button").click(function (){ 
    console.log("Someone clicked the popup newsletter button.") 
});  

解决方法

因为 Squarespace 不提供挂钩到它自己的方法的能力，我们必须使用多个 Mutation Observers，第二个在第一个中设置。通过 Sitewide Footer Code Injection 添加类似的内容应该可以：

<script>
(function() {
  new MutationObserver(function(m1,o1) {
    var popup = document.querySelector(".sqs-popup-overlay");
    if (popup) {
      o1.disconnect();
      new MutationObserver(function(m2,o2) {
        var btn;
        if (popup.classList.contains("visible")) {
          o2.disconnect();
          btn = popup.getElementsByTagName("button")[0];
          btn.addEventListener("click",function() {
            console.log("Someone clicked the popup newsletter button.");
          });
        }
      }).observe(popup,{attributes:true,attributeFilter:['class']});
    }
  }).observe(document.body,{childList:true});
})();
</script>

第一个变异观察者观察主体是否添加了弹出覆盖元素。如果/当该元素存在时，第一个变异观察器将断开连接，第二个观察器被设置为观察弹出窗口的类属性，直到它包含“可见”类。如果/当发生这种情况时，可以断开第二个突变观察者的连接，并将事件侦听器添加到弹出提交按钮中。在该事件侦听器的回调函数中，您的代码将被执行。