我的小部件庫中出現“未定義jQuery”錯誤

Question

我在做什么

我正在創建一個可分發的jQuery小部件庫，該庫在HTML頁面上插入了一個錨點。

問題

在（JS的） “ MyWidget.prototype.Render”方法中，它給我以下錯誤- “未定義jQuery”。但是，在“ MyWidget.prototype.ResolveJqueryAndLoadAdditionalJsAndCss”方法中，它的工作正常。

HTML片段

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <a href="http://yahoo.com">Anchor - by user code</a>

    <!-- Widget Script: Starts -->
    <script type="text/javascript" src="widget.js" ></script>
    <Script type="text/javascript"> 
        var customWidget = new MyWidget();
        customWidget.Render({ anchorText:'Hola!!!' });
    </script>
    <!-- Widget Script: Ends -->
</body>
</html>

JS代碼（widget.js）

    var MyWidget = function() {
    // Localize jQuery variable
    var jQuery;
    // Load jQuery if not present
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
        if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { // For old versions of IE
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                this.ResolveJqueryAndLoadAdditionalJsAndCss();
            }
        };
        } else {
            script_tag.onload = this.ResolveJqueryAndLoadAdditionalJsAndCss;
        }
        // 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;
        this.ResolveJqueryAndLoadAdditionalJsAndCss();
    }
    };

MyWidget.prototype.ResolveJqueryAndLoadAdditionalJsAndCss = function() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
        jQuery(document).ready(function($) {
            $.when(
                $.getScript( "http://www.jacklmoore.com/colorbox/jquery.colorbox.js" ),
                $.Deferred(function( deferred ){
                    $( deferred.resolve );
                })
            ).done(function(){ });
            // Loading Custom CSS
            var css_link = $("<link>", { rel: "stylesheet", type: "text/css", href: "https://raw.github.com/premasagar/cleanslate/master/cleanslate.css" });
            css_link.appendTo('head');
            css_link = $("<link>", { rel: "stylesheet", type: "text/css", href: "http://www.jacklmoore.com/colorbox/example4/colorbox.css" });
            css_link.appendTo('head');
            css_link = $("<link>", { rel: "stylesheet", type: "text/css", href: "widget.css" });
            css_link.appendTo('head');
        });
    };

MyWidget.prototype.Render = function(data){
        jQuery(document).ready(function($) {
            $('<a href="http://wikipedia.com" class="cleanslate custom widgetExternalPage">' + data.anchorText + '</a>').appendTo('body');
            $(".widgetExternalPage").colorbox({iframe:true, width:"80%", height:"80%"});
        });
    };

Answer 1

好吧，您正在重新定義jQuery 。 實際上，您在重新聲明任何變量也在重新設置其值。 在這里，您將jQuery的值設置為undefined 。 您不應該這樣做。

如果需要，可以按照以下方式進行操作：

var jQuery = jQuery || undefined;

這可能會有幫助，祝您好運！

我的小部件庫中出現“未定義jQuery”錯誤

問題描述

1 個解決方案

解決方案1
-1 2014-01-05 06:33:36

我的小部件庫中出現“未定義jQuery”錯誤

問題描述

1 個解決方案

解決方案1 -1 2014-01-05 06:33:36

解決方案1
-1 2014-01-05 06:33:36