如何處理 Elementor Pro Popup JavaScript Events 在 3.8.1 之後無效的替代方案

在 Elementor Pro 2.7 版本時有加入兩個可以於 Popup 開啟和關閉時的 JavaScript 事件,但這兩個函數自從升級到 3.8.1 版本後就被取消掉了。這個修改官方並沒有明確的記載,而是最近升級後才發現有這樣的狀況。

在 Elementor 3.8.0 以前可以使用 Popup 事件

elementor/popup/show – when a Popup is opened/shown
elementor/popup/hide – when a Popup is closed/hidden

在過去你可以使用 jQuery 來監聽這兩個事件

jQuery( document ).on( 'elementor/popup/show', () => {
    // do your tracking here
} );

jQuery( document ).on( 'elementor/popup/hide', ( event, id, instance ) => {
    // do your tracking here
} );

現在 3.8.1 後版本就無法使用上面兩個事件,如果需要使用這兩個事件你會需要將 Elementor Pro 版本降至 3.8.0 (含) 以下。

使用 MutationObeserver 來替代 elementor/popup/show 事件

這邊提供一個新的解決方法是使用 MutationObserver 來偵測頁面上是否有插入 Elementor 的彈跳視窗

  new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        // A new DOM element was added
        const node = mutation.addedNodes[0]
        if( !node.querySelector || !node.classList) return;
        const child = node.querySelector('.elementor-3513')
        const hasClass = node.classList.contains('.elementor-3513')
        if (child || hasClass) {
            if (!app) {
                app = mountInquiryForm()
            }
        }
      }
    });
  }).observe(document.body, {
    childList: true,
    subtree: true
  });

使用 Click 事件來判斷彈跳視窗是否關閉 (替代 elementor/popup/hide 事件)

  jQuery( document ).on('click', '.dialog-close-button', (event, id, instance) => {
    if (app) {
      app.unmount()        
      app = null
    }
  });

使用第三方 JavaScript library - arrive.js

雖然不建議,但這邊還是提到你可以使用 arrive.js 這個第三方工具來偵測 DOM 的出現,使用它的缺點是它已經超過兩年沒更新,可能會有其他潛在的問題。另外引入第三方工具也可能會造成網站速度較慢。

jQuery( document ).arrive('#popup', {fireOnAttributesModification: true}, function() {
  setTimeout(window.ContactFormPopupModule.handlePopupShow, 300)
});

參考文件:https://developers.elementor.com/elementor-pro-2-7-popup-events/