Run Code After Squarespace Popup Event Listener/Trigger

Question

I need to run some custom JS after the modal popup is loaded into the viewport. What's the best way to piggy-back onto whatever event is triggered?

Once the pop-up is loaded, I need to execute something like this:

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

Answer 1

Because Squarespace doesn't provide the ability to hook into its own methods, we must use multiple Mutation Observers, the second being setup within the first. Adding something like this via Sitewide Footer Code Injection should work:

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

The first mutation observer observes the body for the addition of the popup overlay element. If/When that element exists, the first mutation observer is disconnected and a second one is set to observe the class attribute of the popup until it contains the class "visible". If/When that happens, the second mutation observer can be disconnected and an event listener added to the popup submission button. Within the callback function of that event listener, your code is executed.