为什么我对 $(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 3.4.1 添加到 DOM
要加载的脚本元素 jQuery 3.5.1 添加到 DOM
调用了$函数，但是$未定义，所以脚本异常终止
jQuery 3.4.1加载完毕，添加$环境
jQuery 3.5.1 已加载，覆盖 $

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

Answer 2

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

您可以在脚本真正加载后运行您的 jQuery-related 代码：

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。

为什么我对 $(document).ready 有疑问？

Why I have problem with $(document).ready?

javascript

jquery

document-ready