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

Question

I'm learning jQuery but I have a problem.

Here the code:

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);
    }
  });
});

I use alert to check the error, but I can't see the first alert. So the problem is $(document)... but I don't understand why. I'm making a mistake when I include the jQuery library? Thank you for the Help!

Answer 1

You're getting the error because you're trying to access jQuery (via $ ) before it's available.

You can run your jQuery-related code after the script was really loaded:

 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); } }); });

Also, you don't need two different versions of jQuery simultaneously.

Answer 2

The order of activities is:

1. A script element to load jQuery 3.4.1 is added to the DOM
2. A script element to load jQuery 3.5.1 is added to the DOM
3. The $ function is called, but $ is undefined, so the script terminates with an exception
4. jQuery 3.4.1 is loaded, adding $ to the environment
5. jQuery 3.5.1 is loaded, overwriting $

Use a regular <script> element to load your dependencies instead of trying to load them half way through executing your script.