未捕获的引用错误：jQuery未定义。

Question

我想创建一个带有JQuery幻灯片插件的WordPress网站，但插件不会显示在页面上，我总是收到以上错误信息。

尽管我尝试了其他文章中提出的几种不同的修复方法，包括将脚本标签放在“header.php”文件中，但仍然无法解决上述错误。任何帮助都将不胜感激 - 谢谢！

'footer.php'文件中相关的代码：

    <!--Load JQuery-->  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>


</body> 
</html>

网站：http://www.advanceprojects.com.au/。

- user2541351

---

把库放在头文件里有什么问题吗？ - designtocode

错误是因为在滑块尝试使用jQuery之前没有加载jQuery，因此错误被抛出。要修复它，请确保在滑块之前已经加载了jQuery。将其放在页脚中意味着您必须在页脚中包含此后面的滑块或稍后再次包含它，或者将jQuery包含移动到更早的位置，例如在标头中。 - OG Sean

Answer 1

脚本总是按顺序运行。

所以基本上你试图在jQuery库加载之前使用jQuery。

你的脚本依赖于Nivo，而Nivo又依赖于jQuery库。

要么将脚本移动到库加载后的行中，要么将库声明移动到头部。

还要确保将脚本包含在 DOM Ready 处理程序中。

因此，你应该按以下顺序加载它们

-- jQuery 
  -- Nivo Slider
  -- your script that uses the above 2 libraries.

- Sushanth --

Answer 2

我发现当启用“Defer Render Blocking Javascript”时，WooCommerce和Siteground Optimizer都存在这个问题。有一个WC脚本首先引用了jQuery（似乎是一个日期选择器脚本设置默认值） - 不是我添加的自定义脚本，也不是插件。我的脚本使用jQuery并且位于后面，它们正常运行，但这个脚本在jQuery可用之前在头标签中引用...而且只有未登录时才会出现这种情况。如果您已登录，则可以正常工作，退出登录后就会出现问题。 关闭SG Optimizer中的“Defer Javascript”选项似乎可以解决该问题。

- OG Sean

---

哇，我花了5个小时试图找到解决方案，并尝试了许多看起来有效的方法，但都没有成功。我和你处于完全相同的情况，而你突出显示的那一行代码竟然奏效了，哈哈。谢谢！ - Josh Liu

感谢您找到这个SG Optimizer的链接！！！我试图将一个脚本加入队列，并添加了script_loader_tag过滤器以添加async属性，但这一直破坏我的网站。不添加该过滤器或关闭SG设置都可以解决问题！非常感谢。 - SyberKnight

Answer 3

这对我很有帮助。 在代码中添加这一行

。

wp_enqueue_script('jquery');

这个错误发生是因为没有包含jquery，需要在加载其他脚本之前先包含它。 以下是一个例子：

firstplugin.php

<?php
/*
Plugin Name: Plugintrial
Description:  plugin to test jquery
Version:      1
Author:       Dismi Paul
*/
function childtheme_custom_login() {
wp_enqueue_script('jquery');

wp_enqueue_script('my-custom-script', plugins_url('/test.js', __FILE__));
?>

    <h1>Welcome to My Homepage</h1>

<p id="intro">My name is Donald.</p>
<p>I live in Duckburg.<?php echo plugins_url('/test.js', __FILE__); ?></p>

    <?php
}

add_action('login_head', 'childtheme_custom_login');

test.js

jQuery(document).ready(function()
{
  jQuery("#intro").css("background-color", "yellow");
});
console.log("it works");

- Dismi Paul

---

这对我很有帮助。谢谢！ - Dave

Answer 4

在最近的WordPress版本中，这可能是由核心性能改进引起的：

尝试将以下内容放入您的wp.config文件中：

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
    define('ABSPATH', dirname(__FILE__) . '/');

define('CONCATENATE_SCRIPTS', false);

- Phil Hudson

Answer 5

查看链接，了解如何添加CSS和JS文件

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

在jQuery之前，您的JS文件可能已经被加载。

因此，请在jQuery文件加载后再添加JS文件。

示例：

wp_enqueue_script("yourjs","yourjspath",array('jquery'), true);

- Balachandran

Answer 6

使用

jQuery(document).ready(function(){
    jQuery('#wpns_slider').nivoSlider({effect:'random',slices:2,});
});

而不是

jQuery(window).load(function(){
     jQuery('#wpns_slider').nivoSlider({effect:'random',slices:2,});
});

$(window).load(function() {... }) 明确地绑定到窗口的加载事件，而您的代码已经在 jQuery 库加载之前被触发。您必须使用DOM Ready处理程序。

- som