即时加载jQuery

我无法弄清楚我的代码在这里出了什么问题。 我试图动态加载jQuery，如果它不存在于页面上。

  (function() { if (typeof jQuery != 'undefined') { /* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */ if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) { loadJQ(); } } else { loadJQ(); } function loadJQ() { /* adds a link to jQuery to the head, instead of inline, so it validates */ var headElement = document.getElementsByTagName("head")[0]; linkElement=document.createElement("script"); linkElement.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; linkElement.type="text/javascript"; headElement.appendChild(linkElement); //alert(headElement); } })();   

这是我的身体。

   Click me  $(document).ready(function(){ alert("hello"); $("button").click(function(){ $(this).hide(); }); });   

当我把它放在一个html页面时，我得到一个错误，说“$未定义”。 任何人都知道为什么？

Answer 1

“$未定义”错误表示未加载jquery。

尝试使用此脚本加载jquery。

http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/

Answer 2

“$未定义”错误导致jQuery代码在脚本尝试执行时未下载。

您可以尝试使用脚本属性延迟来延迟代码的执行，直到通过更改脚本标记来加载代码

Answer 3

在我的朋友的帮助下，发现上面的代码有什么问题。

当document.ready运行时，jquery不在页面上（运行有两个onReady元素）…并且由于addToHead版本是非阻塞的，因此其余的javascript并行执行并失败。

我在body标签启动后添加了这个并且它工作正常：