使用jQuery和Google代码存储库，未定义$错误 [英] $ is not defined error using jQuery and Google Code Repository

问题描述

我正在尝试从jQuery网站复制选项卡演示.我正在使用的示例页面是: http://yazminmedia.com/playground/jquerytabs.html

I'm trying to duplicate the tabs demo from the jQuery website. The sample page I'm working with is: http://yazminmedia.com/playground/jquerytabs.html

我想使用Google代码存储库来利用缓存.我的页面顶部有以下代码:

I'd like to use the Google Code Repository to take advantage of the caching. I have the following code in the head of my page:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");

$(function() {
  $("#tabs").tabs();
});
</script>

但是，我不断收到以下错误-对于以下行，未定义$":

However, I keep getting the following error - "$ is not defined" for the following line:

$(function() {

有人知道导致错误的原因是什么吗?

Does anyone have any idea what might be going on that is causing the error?

谢谢！

推荐答案

google.load紧随其后插入脚本元素.因此，脚本标记的显示顺序为:

google.load injects a script element right after itself. So the order in which script tags appear is:

// google loads first
<script src="http://www.google.com/jsapi"></script>

// ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");

    // try to use $
    $(function() {
        $("#tabs").tabs();
    });
</script>

// But, jQuery gets included here (after its usage)
<script src="jquery.min.js"></script>

// and jQuery UI gets included here
<script src="jquery-ui.min.js"></script>

由于$的用法出现在文档顺序中包含jQuery之前，因此$将不会在第二步中定义.

Since the usage of $ appears before jQuery is included in document order, $ will not be defined in the second step.

一种解决方案是分解脚本标签，以使google.load语句出现在它们自己的脚本标签中.因此，如果您将代码替换为:

A solution is to break apart the script tags, so that google.load statements appear in their own script tags. So instead if you replace your code with:

<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

<script>
    $(function() {
        $("#tabs").tabs();
    });
</script>

现在文档中脚本标记的顺序为:

The order of script tags in the document now will be:

// first google loads
<script src="http://www.google.com/jsapi"></script>

// then we ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

// jQuery loads
<script src="jquery.min.js"></script>

// jQuery UI loads
<script src=".../jquery-ui.min.js"></script>

// now our script can run smoothly
<script>
    $(function() {
        alert($("h1").text());
    });
</script>

请注意，包含jQuery代码的脚本元素现在会出现在jQuery之后，因此您的代码应该可以使用，并且应该在此之后定义$或jQuery.

Note that the script element containing your jQuery code now appears after jQuery, so your code should work and $ or jQuery should be defined from that point thereon.

但是，更好的解决方案是不使用google的加载顺序，而是使用库的直接链接或使用回调.

However, instead of relying on the behavior of google's loading order, a better solution is to either use the direct links for the libraries, or use a callback.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
    // your jQuery code follows
</script>

或者，使用onLoad回调:

Or, use the onLoad callback:

google.load("jquery", "1");
google.load("jqueryui", "1");

google.setOnLoadCallback(function() {
    // jQuery should be define here
    $(function() {
        alert($("h1").text());
    });
});

这篇关于使用jQuery和Google代码存储库，未定义$错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！