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

Question

我无法从外部加载的文件调用函数。

我有 search_form.php，我从那里调用函数，定义函数的 client.js 文件，以及 plugin_functions.php 文件，我在其中加载 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 文件正在正确加载，因为我得到了控制台输出“loaded_client”。但是，当我单击 div 时，我得到 ReferenceError: validateForm() is not defined.

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

Answer 1

请尝试将 JS 加载到页脚中。

设置页脚为真。我认为它会起作用。

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

Answer 2

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

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

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

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