blocks|key|598076|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|598077|<html>
++<head>

++</head>
++<body>

++++<div+id='status'>jQuery+is+not+loaded+yet.</div>
++++<input+type='button'+value='Click+here+to+load+it.'+onclick='load()'+/>

++</body>
</html>+++|code-block|syntax|javascript|598078|脚本：|598079|+++<script>

++++++++load+=+function()+{
++++++++++load.getScript("jquery-1.7.2.js");
++++++++++load.tryReady(0);+//+We+will+write+this+function+later.+It's+responsible+for+waiting+until+jQuery+loads+before+using+it.
++++++++}

++++++++//+dynamically+load+any+javascript+file.
++++++++load.getScript+=+function(filename)+{
++++++++++var+script+=+document.createElement('script')
++++++++++script.setAttribute("type","text/javascript")
++++++++++script.setAttribute("src",+filename)
++++++++++if+(typeof+script!="undefined")
++++++++++document.getElementsByTagName("head")[0].appendChild(script)
++++++++}

++++++++</script>|598080|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>HTML:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;

  &lt;/head&gt;
  &lt;body&gt;

    &lt;div id='status'&gt;jQuery is not loaded yet.&lt;/div&gt;
    &lt;input type='button' value='Click here to load it.' onclick='load()' /&gt;

  &lt;/body&gt;
&lt;/html&gt;   
</code></pre>

<p>Script:</p>

<pre><code>   &lt;script&gt;

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        &lt;/script&gt;
</code></pre>


blocks|key|382227|text|出现此错误的原因是JavaScript没有等待脚本加载，所以当您运行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382228|jQuery(document).ready(function(){...|code-block|syntax|javascript|382229|不能保证脚本已经准备好了(而且永远不会准备好)。|382230|这不是最优雅的解决方案，但它是可行的。从本质上说，你可以每隔1秒检查一次jQuery对象，并在加载了你的代码时运行一个函数。我也会添加一个超时(比如在它运行了20次之后的clearTimeout+)，以阻止检查无限期地发生。|382231|var+jQueryIsReady+=+function(){
++++//Your+JQuery+code+here
}

var+checkJquery+=+function(){
++++if(typeof+jQuery+===+"undefined"){
++++++++return+false;
++++}else{
++++++++clearTimeout(interval);
++++++++jQueryIsReady();
++++}
}
var+interval+=+setInterval(checkJquery,1000);|382232|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The reason you are getting this error is that JavaScript is not waiting for the script to be loaded, so when you run </p>

<pre><code>jQuery(document).ready(function(){...
</code></pre>

<p>there is not guarantee that the script is ready (and never will be).</p>

<p>This is not the most elegant solution but its workable.  Essentially you can check every 1 second for the jQuery object ad run a function when its loaded with your code in it.  I would add a timeout (say clearTimeout after its been run 20 times) as well to stop the check from occurring indefinitely. </p>

<pre><code>var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);
</code></pre>


blocks|key|598228|text|使用require.js，您可以以更安全的方式做同样的事情。您只需定义对jquery的依赖项，然后在加载时使用依赖项执行所需的代码，而不会污染名称空间：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|598229|我通常推荐这个库来管理Javascript上的所有依赖项。它很简单，并且允许高效地优化资源加载。但是，在JQuery中使用它时，您可能需要使用一些precautions。我最喜欢的处理它们的方法在这个github+repo中进行了解释，并在下面的代码示例中得到了反映：|598230|<title>jQuery%2BRequireJS+Sample+Page</title>
+++<script+src="scripts/require.js"></script>
+++<script>
+++require({
+++++++baseUrl:+'scripts',
+++++++paths:+{
+++++++++++jquery:+'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
+++++++},
+++++++priority:+['jquery']
++++},+['main']);
++++</script>|code-block|syntax|javascript|598231|entityMap|0|LINK|mutability|MUTABLE|url|http://requirejs.org/|1|http://requirejs.org/docs/jquery.html|2|https://github.com/jrburke/require-jquery^0|2|A|0|0|21|B|1|2S|B|2|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

<p>Using <a href="http://requirejs.org/" rel="nofollow">require.js</a> you can do the same thing in a safer way. You can just define your dependency on jquery and then execute the code you want using the dependency when it is loaded without polluting the namespace:</p>

<p>I generally recommend this library for managing all dependencies on Javascript. It's simple and allows for an efficient optimization of resource loading. However there's some <a href="http://requirejs.org/docs/jquery.html" rel="nofollow">precautions</a> you may need to take when using it with JQuery . My favourite way to deal with them is explained in this <a href="https://github.com/jrburke/require-jquery" rel="nofollow">github repo</a> and reflected by the following code sample:</p>

<pre><code>&lt;title&gt;jQuery+RequireJS Sample Page&lt;/title&gt;
   &lt;script src="scripts/require.js"&gt;&lt;/script&gt;
   &lt;script&gt;
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    &lt;/script&gt;
</code></pre>


blocks|key|382388|text|您需要在jQuery加载完成后运行代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382389|var+script+=+document.createElement('script');+
document.head.appendChild(script);++++
script.type+=+'text/javascript';
script.src+=+"//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
script.onload+=+function(){
++++//+your+jQuery+code+here
}+|code-block|syntax|javascript|382390|382391|或者，如果您在异步函数中运行它，则可以在上面的代码中使用await|offset|length|style|CODE|382392|var+script+=+document.createElement('script');+
document.head.appendChild(script);++++
script.type+=+'text/javascript';
script.src+=+"//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
await+script.onload
//+your+jQuery+code+here|382393|如果要先检查页面中是否已存在jQuery，请尝试使用this|382394|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/42013103/3577695^0|0|0|0|S|5|0|0|Q|4|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@$J|13|K|14|L|M]]|9|@]|A|$]]|$1|N|3|O|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|P|3|Q|5|6|7|16|8|@]|9|@$J|17|K|18|1|19]]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>You need to run your code AFTER jQuery finished loading</p>
<pre><code>var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = &quot;//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js&quot;;
script.onload = function(){
    // your jQuery code here
} 
</code></pre>
<hr />
<p>or if you're running it in an async function you could use <code>await</code> in the above code</p>
<pre><code>var script = document.createElement('script'); 
document.head.appendChild(script);    
script.type = 'text/javascript';
script.src = &quot;//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js&quot;;
await script.onload
// your jQuery code here
</code></pre>
<p>If you want to check first if jQuery already exists in the page, try <a href="https://stackoverflow.com/a/42013103/3577695">this</a></p>


<p>I am appending the jQuery library to the dom using:</p>

<pre><code> var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);
</code></pre>

<p>However when I run:</p>

<pre><code>jQuery(document).ready(function(){...
</code></pre>

<p>The console reports the error:</p>

<pre><code>Uncaught ReferenceError: jQuery is not defined
</code></pre>

<p>How do I load jQuery dynamically as well as use it once it is in the dom?</p>


Load jQuery with Javascript and use jQuery

jQuery

我使用以下命令将jQuery库附加到dom： var script = document.createElement('script'); script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; script.ty...

问使用Javascript和jQuery加载jQuery
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript和jQuery加载jQueryEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript和jQuery加载jQuery
EN