通过Modernizr加载jQuery后运行自定义代码

我正在开发一个新网站，并决定第一次使用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]); }); 

                Small modal