WordPress中JS与HTML交互异常：函数未定义问题解决

问题场景 #

在WordPress中部署自定义JavaScript脚本时遇到以下问题：

• 已通过wp_enqueue_script根据产品ID加载对应脚本（例如rectangle.js）
• 已调整钩子优先级确保脚本正确加载
• 但点击绑定了该函数的HTML按钮时，浏览器提示函数未定义

问题根源 #

自定义函数被包裹在jQuery闭包（比如(function($){ ... })(jQuery)）内部，函数作用域被限制在闭包范围内，无法被全局作用域中的HTML onclick事件访问。

解决方案 #

将需要被HTML onclick调用的函数挂载到window全局对象上，使其成为全局可访问的函数。

示例代码：

(function($) {
    // 挂载到window对象，让全局作用域可访问
    window.squareMM = function() {
        // 这里写你的函数逻辑
        console.log("函数执行");
    };
})(jQuery);

调整后，HTML按钮即可正常调用：

<button onclick="squareMM()">执行函数</button>

内容的提问来源于stack exchange，提问作者Espen B