2

https://stackoverflow.com/a/6065421は、jqueryがロードされたことを確認する方法を確認するのに役立ちました。私のウィジェットには、jqueryを使用して作成されたクラスが必要です。jqueryを使用して構築されたこの他のクラスを埋め込むための支援がありますか？ありがとうございました、

以下は、コードコメントに記載されているように、最後の部分に私のコードが追加された上記のリンクのスニペットです。

    (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クラスをインポートする方がよかったのですが、理解できませんでした。

4

2 に答える 2

2

すでにjQueryをロードしているので、$.getScript()関数を使用してファイルを取得する方が簡単かもしれません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({});
    });
});
于 2012-07-03T02:24:29.780 に答える
0

数週間待った後、必要なjqueryクラスからコードを取得し、jqueryのロードが確認された後にそれを本体内に配置しました。jqueryがロードされた後にjqueryクラスをインポートする方がよかったのですが、理解できませんでした。

于 2012-07-12T20:35:32.767 に答える