ReferenceError:$未在jQuery Colorbox中定义

几天前，我在使用jQuery colorbox，它工作得非常好，但在升级到jQuery v1.11.0后，它突然完全停止工作

使用firebug检查我发现的任何错误如下：

ReferenceError:$未定义$document.readyfunction{

下面的代码现在充当普通href

<script src="http://code.jquery.com/jquery-1.11.0.min.js" defer="defer"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" defer="defer"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript" defer="defer"></script>
<link id="stylesheet" type="text/css" href="js/popup/box/colorbox.css" rel="stylesheet" />

    <script type="text/javascript">
    $(document).ready(function(){
        $("a.popup").colorbox({iframe:true, innerWidth:680, innerHeight:401});
    });
    </script>

<a class="popup" href="/core/ajax/status.php?ID=143" title="Status">View Status</a>

这是因为您已经加载了jQuery，所以当执行内联脚本块时，jQuery还没有加载

的属性告诉浏览器在解析文档之前处理脚本的加载

不要延迟jQuery的加载

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript"></script>

另一种选择是将脚本移动到一个单独的js文件中，并将其作为延迟资源包括在内，从而使脚本也以延迟方式执行

<script src="http://code.jquery.com/jquery-1.11.0.min.js" defer="defer"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" defer="defer"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/jquery.colorbox-min.js" type="text/javascript" defer="defer"></script>
<script src="test.js" defer="defer"></script>

延迟告诉浏览器在该脚本块中执行javascript之前等待它准备就绪。通常这是在DOM完成加载并且document.readyState==4之后

---

因此，在调用$document.ready时不会加载jquery。请删除defer属性，所有操作都将正常运行。

问题在于您的脚本

<script type="text/javascript">
$(document).ready(function(){
    $("a.popup").colorbox({iframe:true, innerWidth:680, innerHeight:401});
});
</script>

在html解析器看到它之后启动！并且当页面完成解析时，将执行具有defer属性的脚本

---

解决方案：只需从所有脚本中删除defer属性！

请JSFIDLE提供！按照答案建议，停止使用defer。此外，您不能从GitHub引用JS文件，因为它返回文本/纯mime类型。谢谢大家，这解决了我的问题。