javascript - 从 javascript 加载 jquery 库时出现错误 $ is not defined

Question

我已经从 javascript 将我的 jquery 库加载到我的插件中，如果我从另一个 javscript 页面调用我的插件匿名函数，则会出现错误 $ is not defined以下是我的作品

(function () {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.3') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict();
        // Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        // Add some validation here to make sure UI is not loaded etc...
        jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js');

        jQuery(document).ready(function ($) {
            /******* Load CSS *******/
            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "StyleSheet.css"
            });
            css_link.appendTo('head');

            //loading plug in
            "use strict";
            $.fn.myplugin = function (options) {
                var settings = $.extend({
                    //default
                    isstatic: false
                });
                var options = $.extend(settings, options);
                var images = ['http://www.example1.com'/1.png, 'http://www.example2.com/final.gif'];
                //Iterate over the current set of matched elements
                return this.each(function () {
                    var obj = $('.div2');

                    obj.hide();
                    $(this).show();

                    $(this).click(function () {

                        obj.toggle("slow");
                        if (options.isstatic) {
                            $(".image-class").attr("src", images[0]);
                            options.isstatic = false;
                        }
                        else {
                            $(".image-class").attr("src", images[1]);
                            options.isstatic = true;
                        }
                    });

                });

                return options.isstatic = false;
            }



        });




    }
})();

我正在使用另一个 file.js 调用它

$(document).ready(function () {
    $('#mydiv').myplugin();

});

我在这里收到一个错误$ is no defined 如何消除这个错误可能 b 我对 jQuery 变量或 javascript 文件中的 $ 做错了

Answer 1

我猜你需要 jquery 才能在你的页面中运行更多的脚本或者你的插件才能运行，所以 jquery 引用应该是头部的第一个，你可以尝试替换你的代码部分吗( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(script_tag)

与

var head=( document.getElementsByTagName("head")[0] || document.documentElement ); head.insertBefore(script_tag,head.firstChild);