为什么我的 $(document).ready 有问题？

Question

我正在学习 jQuery，但我遇到了问题。

这里的代码：

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = "text/javascript";

var pt = document.createElement('script');
pt.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
document.getElementsByTagName('head')[0].appendChild(pt);

$(document).ready(function() {
  alert("ti vedo");
  $.post('wait.php', function(data) {
    alert("ti vedo2");
    var dati = JSON.parse(data);
    alert(data);
    for (var i = 0; i <= dati.length; i++) {
      var node = $(document.createElement("span"));
      var content = $(document.createElement("div"));
      var code = dati[i];
      var text = $(document.createTextNode(code));
      node.append(text);
      content.append(node);
      $("#boxMessage").append(content);
    }
  });
});

我使用警报来检查错误，但我看不到第一个警报。 所以问题是 $(document)... 但我不明白为什么。 我在包含 jQuery 库时犯了一个错误？ 感谢您的帮助！

Answer 1

您收到错误是因为您试图在它可用之前访问jQuery （通过$ ）。

您可以在脚本真正加载后运行与 jQuery 相关的代码：

 var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.4.1.min.js'; script.type="text/javascript"; document.getElementsByTagName('head')[0].appendChild(script); script.addEventListener('load', function(){ alert("ti vedo"); $.post('wait.php',function(data){ alert("ti vedo2"); var dati=JSON.parse(data); alert(data); for(var i=0; i<=dati.length; i++){ var node=$(document.createElement("span")); var content=$(document.createElement("div")); var code=dati[i]; var text=$(document.createTextNode(code)); node.append(text); content.append(node); $("#boxMessage").append(content); } }); });

此外，您不需要同时使用两个不同版本的jQuery 。

Answer 2

活动顺序为：

1. 加载 jQuery 3.4.1 的脚本元素被添加到 DOM
2. 加载 jQuery 3.5.1 的脚本元素被添加到 DOM
3. 调用了$函数，但$未定义，因此脚本以异常终止
4. 加载 jQuery 3.4.1，在环境中添加$
5. jQuery 3.5.1 已加载，覆盖$

使用常规<script>元素加载您的依赖项，而不是尝试在执行脚本中途加载它们。