Why is ColorBox not loading properly?

问题:

The error I get is:

$ is undefined Line 8

which is:

$.colorbox({html:'<p>TEST TEST</p>'});

This is how the page renders:

<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/jquery.min.js?Y"></script>
<script type="text/javascript" src="/misc/drupal.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/fivestar/js/fivestar.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/extlink/extlink.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/signwriter/signwriter.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/thickbox/thickbox.js?Y"></script>

<script type="text/javascript" src="/sites/all/modules/ubercart/uc_roles/uc_roles.js?Y"></script>
<script type="text/javascript" defer="defer" src="/sites/all/modules/admin_menu/admin_menu.js?Y"></script>
<script type="text/javascript" src="/sites/all/libraries/jquery/colorbox/jquery.colorbox.js?Y"></script>
<script type="text/javascript" src="/sites/all/modules/mysite/mysite_module/js/sasapp.js?Y"></script<--($.colorbox({html:'<p>TEST</p>'});)

回答1:

jQuery has a function that allows the jQuery library to be compatible with any other libraries that use $ as function name; if one of the script is causing jQuery to run in compatible way, then the function $ is not defined from jQuery, and you can only use jQuery() to access any jQuery functionality.

If the code in sites/all/modules/jquery_update/replace/jquery.min.js is not corrupted, and it's not a problem caused from the browser, then that is the only possibility I can think of.

To be sure it's not another problem, I would use a non minimized version of the jQuery library. I had some problems with a minimized jQuery library, with some browsers (mainly Internet Explorer 6, but the issue could be present in different browsers).

回答2:

You are not including jQuery properly, please check the source and confirm that you first script src is actually the jQuery source.

回答3:

I suspect that you are calling the function before jquery or colorbox has loaded.

Try changing the call to and put it below the line where you declare the jquery call.

$(document).ready(function(){
  $.colorbox({html:'<p>TEST TEST</p>'});
);

This will wait for the scripts to load before trying to call the function.

回答4:

Please add the scripts the following way:

1. color.css
2. jquery.min.js
3. colorbox.js and please mention css type .
4. Add doctype at very beginning of page.

I think it will work definitely......