问题描述
我需要在模态弹出窗口加载到视口中之后运行一些自定义 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>
第一个变异观察者观察主体是否添加了弹出覆盖元素。如果/当该元素存在时,第一个变异观察器将断开连接,第二个观察器被设置为观察弹出窗口的类属性,直到它包含“可见”类。如果/当发生这种情况时,可以断开第二个突变观察者的连接,并将事件侦听器添加到弹出提交按钮中。在该事件侦听器的回调函数中,您的代码将被执行。