為什么我的 $(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>元素加載您的依賴項，而不是嘗試在執行腳本中途加載它們。