Elementor插件开发：如何正确获取Widget侧边控件的动态值

你的问题核心由三个原因导致：

1. 钩子绑定错误：你用了elementor/frontend/init钩子，这是前端预览页面的初始化钩子，运行上下文不属于编辑器，自然拿不到编辑器面板的作用域
2. 取值方式不规范：直接通过DOM选择器获取控件值，依赖面板渲染状态，很容易出现作用域错乱，且你代码存在笔误：定义了小写变量info，却打印大写的Info，这也是直接报错的原因之一
3. 没有绑定Widget上下文：事件触发时没有关联当前编辑的Widget实例，取值可能匹配到其他Widget的控件

正确实现代码 #

// 监听Elementor编辑器初始化钩子，确保运行在编辑器上下文
jQuery(window).on('elementor/editor/init', () => {
    elementor.channels.editor.on('GenerateEvent', () => {
        // 获取当前正在编辑的Widget实例
        const activeWidget = elementor.getPanelView().getCurrentPageView().model;
        
        // 用Elementor内置API直接取控件值，无需操作DOM，不会出现作用域问题
        const info = activeWidget.getSetting('Info');
        console.log(info);
        const tash = activeWidget.getSetting('tash');
        const tashType = activeWidget.getSetting('tashType');
        const FixTash = activeWidget.getSetting('tashType');
        const sendemail = activeWidget.getSetting('sendemail');
        const PageLang = activeWidget.getSetting('PageLang');
        const Coin = activeWidget.getSetting('Coin');
        const Postpone = activeWidget.getSetting('Postpone');
        const J5 = activeWidget.getSetting('J5');
        
        // 后续业务逻辑
    });
});

更稳妥的优化方案 #

如果你的GenerateEvent是自定义按钮触发的，建议在触发事件时直接传递当前Widget实例，避免同时打开多个Widget面板时取值错误：

1. 首先修改按钮的点击触发逻辑（放在你定义生成按钮的控件配置中）

events: {
    'click': function() {
        // 触发事件时传递当前Widget模型
        elementor.channels.editor.trigger('GenerateEvent', this.model);
    }
}

2. 监听事件时直接接收传入的模型取值

jQuery(window).on('elementor/editor/init', () => {
    elementor.channels.editor.on('GenerateEvent', (widgetModel) => {
        const info = widgetModel.getSetting('Info');
        // 其余逻辑同上
    });
});

内容的提问来源于stack exchange，提问作者Sagi Weizmann