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