无法在wordpress上从外部加载的文件调用js函数

Question

我在从外部加载的文件调用函数时遇到麻烦。

我有 search_form.php ，我在这里调用函数， client.js 文件，其中定义了函数， plugin_functions.php < / strong>文件，我加载client.js文件。

在plugin_functions.php文件中，我有以下代码：

console.log('loaded_client'); 
function load_client_scripts() {
     wp_register_script('js-client', PLUGIN_URL.'includes/js/client.js',array('jquery'),false);
     wp_enqueue_script( 'js-client' );
 };
add_action( 'wp_enqueue_scripts', 'load_client_scripts' );

在client.js中，我按如下方式定义函数：

(function($) {
    function validateForm(){
        console.log('Form validated');
    };
})( jQuery );

最后，在search_form.php中，我使用onclick调用该函数：

 <div onclick="validateForm()">
    CLICK ME
 </div>

现在，js文件正在正确加载，因为我得到了控制台输出＆loading; client_client＆＃39;。但是，当我单击div时，我得到ReferenceError：validateForm（）未定义。

我做错了什么？这肯定是一个范围问题，但我无法弄清楚。

Answer 1

(function($) {
 window.validateForm = function(){
    console.log('Form validated');
};
})( jQuery );

<div onclick="window.validateForm()">
CLICK ME
</div>

你是对的，在你的例子中，范围是错误的，因为包含在(function($) {这个匿名函数中。

为了清晰起见进行编辑：如果您希望它是一个全局可访问的函数，您可以将它附加到窗口对象，就像这个例子一样。

Answer 2

请尝试将JS加载到页脚。

设置页脚为true。我认为它会奏效。

wp_register_script( 'js-client', PLUGIN_URL.'includes/js/client.js',array('jquery'),false,true);