WordPress Elementor表单提交后触发弹窗JavaScript的问题

方法1：监听弹窗显示事件 #

Elementor弹窗在显示时会触发内置JS事件，你可以把脚本改成监听这个事件，确保弹窗打开后再执行代码：

document.addEventListener('elementor/popup/show', function(event) {
    // 替换成你的弹窗实际ID，比如弹窗ID是123
    if (event.detail.id === 123) {
        // 这里写入你要执行的JS代码
        console.log('弹窗已打开，开始执行代码');
        // 示例操作：修改弹窗内指定元素内容
        document.querySelector('.elementor-popup-content .target-class').textContent = '提交成功！';
    }
});

把这段代码放到主题自定义JS区域或者Elementor全局自定义JS中（不要放在弹窗的自定义JS里），就能确保代码在弹窗显示时才触发。

方法2：监听表单提交成功事件 #

直接监听Elementor表单的提交成功事件，在表单提交完成后再执行针对弹窗的代码：

document.addEventListener('elementor/form/submit/success', function(event) {
    // 替换成你的表单实际ID，比如表单ID是456
    if (event.detail.formId === 456) {
        // 可选：延迟执行，避免弹窗还未完成渲染
        setTimeout(function() {
            // 这里写入你要执行的JS代码
            console.log('表单提交成功，弹窗已打开，开始执行代码');
        }, 500);
    }
});

同样，这段代码放在全局JS区域即可，不要放在弹窗的自定义JS里。

关键注意点 #

• 获取弹窗ID：编辑弹窗时，Elementor编辑器左下角会显示Popup ID: XXX，取这个数值即可。
• 获取表单ID：编辑表单组件时，在「高级」选项卡中可以看到表单ID。
• 避免将代码放在弹窗自定义JS中，因为弹窗DOM加载完成时就会执行这段代码，而非弹窗显示时。

内容的提问来源于stack exchange，提问作者Graphic Media Masters