在 Squarespace 彈出事件偵聽器/觸發器之后運行代碼

Question

在將模式彈出窗口加載到視口后，我需要運行一些自定義 JS。 搭載任何觸發事件的最佳方式是什么？

加載彈出窗口后，我需要執行以下操作：

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

Answer 1

因為 Squarespace 不提供掛鈎到它自己的方法的能力，所以我們必須使用多個Mutation Observers ，第二個是在第一個中設置的。 通過站點范圍的頁腳代碼注入添加這樣的東西應該可以工作：

<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>

第一個突變觀察者觀察主體以添加彈出覆蓋元素。 如果/當該元素存在時，第一個突變觀察器斷開連接，第二個突變觀察器設置為觀察彈出窗口的 class 屬性，直到它包含 class “可見”。 如果/當這種情況發生時，第二個突變觀察者可以斷開連接，並將一個事件監聽器添加到彈出提交按鈕。 在該事件偵聽器的回調 function 中，將執行您的代碼。