通過Modernizr加載jQuery后運行自定義代碼

Question

我正在開發一個新站點，因此決定第一次使用Modernizr。 我相當確定它的工作原理，但是我一直在尋找有關最佳實踐的建議，這涉及到加載jQuery然后運行jQuery代碼。

我當前有以下內容作為頁面上的最后一項加載：

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        complete: function(){
            if( !window.jQuery){
                Modernizr.load('/scripts/jquery-1.11.1.min.js');
            }
        }
    },
    {
        load: '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
        complete: function () {
            if ((typeof $().emulateTransitionEnd == 'function') == false) {
                Modernizr.load('/scripts/bootstrap.min.js');
            }
        }
    }
]);

這會嘗試從CDN檢索jQuery，如果無法檢索，則加載本地版本。 然后，使用網站上我的引導程序組件所需的Javascript重復此過程。

我的問題是，我接下來直接擁有一些jQuery代碼：

$(document).ready(function () {
    $('.wishlist-toggle').click(function () {
        var nodeId = $(this).data("node");
        var id = $(this).data("id");
        var type = $(this).data("type");
        var addTo = $(this).data("add");
        var list = $(this).data("list");
        var removeFrom = $(this).data("remove");
        var storedCookie = getCookie("wishlist");
        var jsonString = null;
        var found = false;

...

由於某些原因，盡管在整個jQuery加載聲明之后，但我在控制台中收到一個錯誤，指出未定義$。 這通常表明在調用自定義腳本時，尚未加載jQuery。

我的問題是，通常如何執行此操作？在這種情況下，什么是最佳實踐，以確保在嘗試運行自定義代碼之前真正加載jQuery。

任何幫助，提示或指示，將不勝感激。

Answer 1

嘗試

 var _jquery = function () { $(document).ready(function () { // do jquery stuff console.log("jQuery loaded"); $("#jq").html("jquery version " + jQuery().jquery + " ready") }) }; var _bootstrap = function () { // do bootstrap stuff console.log("bootstrap loaded"); $(".btn").trigger("click") .promise().done(function(el) { setTimeout( function() { $(el).trigger("click") }, 3000 ) }); }; var _load = function (url1, url2, test, callback) { var script = document.createElement("script"); script.src = url1; script.type = "text/javascript"; var head = document.getElementsByTagName("head")[0]; head.appendChild(script); setTimeout(function () { if (test()) { _load(url2, null, function() {return false}, callback) } else { callback() } }, 3000) }; var _scripts = [ ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" , "//code.jquery.com/jquery-1.11.1.min.js", function () { return !window.jQuery }, _jquery], ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () { return (typeof $().emulateTransitionEnd == 'function') == false }, _bootstrap] ]; _scripts.forEach(function (v) { _load(v[0], v[1], v[2], v[3]); });

 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Small modal --> <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div id="jq"></div> </div> </div> </div> </body>

通過Modernizr加載jQuery后運行自定義代碼

問題描述

1 個解決方案

解決方案1
0 已采納 2014-09-30 18:27:53

通過Modernizr加載jQuery后運行自定義代碼

問題描述

1 個解決方案

解決方案1 0 已采納 2014-09-30 18:27:53

解決方案1
0 已采納 2014-09-30 18:27:53