javascript - 从同一文件 append jQuery 后无法运行 jQuery 函数

Question

我正在将多个脚本 append 到我的页面中，包括 jQuery、jQuery migrate...全部来自同一个 .js 文件

它看起来是这样的:

function appendScript(pathToScript, run) {
    var head = document.getElementsByTagName("head")[0];
    var js = document.createElement("script");
    js.type = "text/javascript";
    if(run == true){
        js.onreadystatechange = function () {
            if (this.readyState == 'complete') runFunctions();
        }
        js.onload = runFunctions;
    }
    js.src = pathToScript;
    head.appendChild(js);
}
appendScript("http://code.jquery.com/jquery-latest.min.js");
appendScript("http://code.jquery.com/jquery-migrate-1.3.0.min.js", true);
function runFunctions(){
    console.log('test') // all good till here
    // here i have only jquery functions
    $('#myDiv').addClass('test'); 
    alert("this doesn't work");
    ....
}

我的问题是我无法运行 $(document).ready 或任何 jQuery 函数，只能运行 javascript。

也尝试过超时。另外我已经有 1 个 $(window).bind("load", function(){...} 所以我不需要再有 1 个

Answer 1

由于 jQuery Migrate 依赖于 jQuery，因此您需要等待加载下一个脚本。

这是一个工作示例(我还清理了一些变量)。

function appendScript(src, callback) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (callback) {
    script.onload = callback;
  }
  script.src = src;
  head.appendChild(script);
}

appendScript("https://code.jquery.com/jquery-latest.min.js", function() {
  appendScript("https://code.jquery.com/jquery-migrate-1.3.0.min.js", function() {
    document.body.innerHTML = 'Loaded jQuery version ' + jQuery.fn.jquery;
  });
});

查看工作jsfiddle .