在小部件加载 jquery 后嵌入 jquery 脚本答案

【问题标题】：embed a jquery script after jquery is loaded by widget在小部件加载 jquery 后嵌入 jquery 脚本
【发布时间】：2012-07-13 04:35:32
【问题描述】：

https://stackoverflow.com/a/6065421 有助于了解如何确认 jquery 已加载。我的小部件将需要一个使用 jquery 编写的类。我可以在嵌入使用 jquery 构建的其他类方面提供一些帮助吗？谢谢，

下面是来自上述链接的 sn-p，我的代码添加在最后部分，如代码 cmets 中所述：

    (function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        document.documentElement.childNodes[0].appendChild(script)
    }
})(window, document, "1.3", function($, jquery_loaded) { //my code added below
    var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://mysite.com/widget/slides.jquery.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

$('#slides').slides({}); //this line gives an error.
});

现在，我正在根据对此问题提供的回复尝试以下操作（引发错误的行带有注释）：

//this function is called after jquery being embedded has been confirmed. {mysite} placeholder is nonexistent in actual code.
function main() {
jQuery(document).ready(function($) {
    var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "http://mysite/widget/widget.css"
    });
    css_link.appendTo('head');

    $('#crf_widget').after('<div id="crf_widget_container"></div>');

    /******* Load HTML *******/
    var jsonp_url = "http://mysite/widget.php?callback=?";
    $.getJSON(jsonp_url, function(data) {
        $('#crf_widget_container').html(data);

        $('#category_sel').change(function(){
            alert(this.value);
        });

        $.getScript("http://mysite/widget/slides.jquery.js", function(data, textStatus, jqxhr) {
            alert(1); //fires ok
            $('#slides').slides({}); //errors
        });
    });
});
}

error 1: $ is undefined .../slides.jquery.js?_=1341349267810 Line 22
error 2: $("#slides").slides is not a function .../widget.js?1341349266628 Line 61

$('#slides').slides({});当我测试小部件的工作原理时工作。但是，当它变成一个小部件时，上面的错误就是我所面临的。

有人有更多建议吗？

等了几个星期后，我刚刚从我需要的 jquery 类中获取了代码，并在 jquery 的负载得到确认后将其放入正文中。我宁愿在加载 jquery 后导入 jquery 类，但我想不通。

【问题讨论】：

标签： javascript jquery widget

【解决方案1】：

既然您已经加载了 jQuery，也许使用$.getScript() function 来获取您的slides.jquery.js 文件会更容易——像这样：

<!-- language: lang-js -->
(function(window, document, version, callback) {
    var j, d, loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        document.documentElement.childNodes[0].appendChild(script)
    }
})(window, document, "1.3", function($, jquery_loaded) { //my code added below
    // use $.getScript
    $.getScript("http://mysite.com/widget/slides.jquery.js", function(data, textStatus, jqxhr) {
        $('#slides').slides({});
    });
});

【讨论】：

我已经更新了我最初的问题以显示我正在使用的当前功能。它正在使用您建议的方法，但正文中的行仍然抛出错误。我已经用普通的非小部件方法测试了这条会引发错误的行，并且没有问题。所以，似乎 jquery 在需要时不可用。 $.getScript 块之前的代码没有问题，这是 jquery 支持的语法。
什么错误？你确定$('#slides') 存在吗？为什么$.getScript() 在$.getJSON() 之内，它应该在该函数之外，除非$('#slides') 在加载的HTML 之内。你听说过yepnope.js吗？
我已经编辑了我的问题以显示错误。由于您提到的原因，$.getScript() 嵌套在 getJSON() 中。我查看了 yepnope.js，但我想知道是否可以更正我当前的代码设置，因为我在那里没有看到“制作小部件”示例？

【解决方案2】：

等了几个星期后，我刚刚从我需要的 jquery 类中获取了代码，并在 jquery 的负载得到确认后将其放入正文中。我本来希望在加载 jquery 后导入 jquery 类，但我想不通。

【讨论】：