从同一个文件追加jQuery后无法运行jQuery函数

时间:2016-08-30 16:48:38

标签: javascript jquery append

我在我的页面中添加了多个脚本,包括jQuery,jQuery migrate ... all from .js file

它的外观如下:

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 x $(window).bind("load", function(){...},所以我不再需要1个

1 个答案:

答案 0 :(得分:3)

由于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