Question

过去2天我搜索过StackOverflow，但没有找到解决方法。我正在尝试做一些非常基本的事情，但WordPress让我把头发拉出来。

我有一个名为'test.js'的JavaScript文件，该文件位于我的Child Theme文件夹中名为scripts的文件夹中。该文件包含以下代码：

function myFunc() {
 alert('hi');
}

我遵循了在Wordpress中加载JavaScripts的最佳实践，并且我在我的Child Theme文件夹的functions.php文件中包含了以下函数。

function add_my_script() {
wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    }
add_action('init', 'add_my_script');

注意：get_stylesheet用于获取Child Theme目录，因为我的style.css根据Wordpress的子主题规则覆盖了我的父主题中的style.css。

现在执行此操作后，我希望能够访问test.js文件中的myFunc（）函数。所以在我的function.php文件中，我有一个函数TestmyFunc（），它执行以下操作：

function TestmyFunc()
{
echo 'Click the button below';
echo '<button onclick="myFunc()">Click Me</button>';
}

当某个页面加载时，在Wordpress中调用函数TestmyFunc（）。页面完全加载输出'点击下方的按钮'打印，并且按钮说“点击我”也在那里。现在这是令人沮丧的部分，无论我做什么，点击时按钮都无法响应。绝对没有。

我的第一个想法是JavaScript没有加载，我的wp_enqueue_script代码出现问题。然而，这不是问题。

我尝试了以下更改。首先，我将test.js文件修改为这一行：

alert('hi');

然后我在functions.php文件中编写了以下函数：

    function run_my_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    
        }
add_action('init', 'add_my_script');

然后将

run_my_script设置为以与TestmyFunc（）加载相同的方式加载到我的页面中。这似乎工作正常，当我在WordPress中的页面加载run_my_script（）函数工作，并在页面加载时我得到一个警告框“hi”。显然这不是我想要的，因为我希望它只在单击一个按钮时显示，这需要一个从test.js文件中调用的函数，而不仅仅是运行test.js脚本。

所以我调用JavaScript函数的方式似乎有问题吗？如果任何人都可以以任何方式提供帮助，那将是非常好的。

我根本无法使用wp_enqueue_script来调用JavaSript函数，唯一可行的是我按照本教程http://lorelle.wordpress.com/2005/09/16/using-javascript-in-wordpress/

加载我的脚本时使用的老式/非WordPress推荐方法

这包括在header.php中包含这个：

<script src="<?php echo get_stylesheet_directory_uri(); ?>/scripts/test.js" type="text/javascript"></script>

然后调用functions.php中的函数

echo'
   <script type="text/javascript">
   <!--
   myFunc();
   //--></script>';

这很有效，myFunc（）按照调用方式运行。但是，我不想编辑我的header.php文件，而是更喜欢使用最佳实践wp_enqueue_script方法。

我真的希望有人可以提供帮助，因为我在过去的48小时内几乎没有睡觉，尽可能地尝试一切并最终感到非常沮丧。

Answer 1

简单清单：

检查源代码。确保在浏览器中输出脚本。确保网址正确无误。
wp_enqueue_scripts 您对init的操作有误，请将其更改为：wp_enqueue_scripts。虽然您的代码可能有效，但最好使用wp_enqueue_scripts。

应该是：

add_action('wp_enqueue_scripts', 'run_my_script');

<强> wp_head（）;和wp_footer（）; 确保您的子主题/父主题包含以下标记：wp_head();和wp_footer();
$ in_footer 您可能需要将$ in_footer参数更改为false。在标题中输出脚本。换句话说，确保在调用标记之前启动了您的功能。

希望它有所帮助！

Wordpress中的JavaScript - 无法调用函数

1 个答案: