JQuery：延迟加载 JQuery 和“$ not defined”
[英]JQuery: Deferred loading of JQuery and '$ not defined'
问题描述
I cannot wrap my head around this issue and the vast offer of information I found on the.net:
我无法解决这个问题以及我在 .net 上找到的大量信息：
On my project the JQuery is loaded with "defer".在我的项目中，JQuery 加载了“延迟”。 This I cannot change due to project standards.由于项目标准，我无法更改。
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
Now I need to add some small functions to a page (currently inline):现在我需要向页面添加一些小功能（目前是内联的）：
With this setup the browser will try to execute the inline scrip before jQuery loads => "Uncaught ReferenceError: $ is not defined"使用此设置，浏览器将尝试在 jQuery 加载之前执行内联脚本 => “Uncaught ReferenceError: $ is not defined”
<body>
...
...
<script>
$("#city").change(function() {...some stuff...};
$("#doctor").change(function() {...some stuff...};
</script>
</body>
Whats the smart way to resolve this?解决这个问题的聪明方法是什么？
3 个解决方案
解决方案1
18 已采纳 2016-08-29 12:46:56
Wrap it inside window.onload , so the script will only be executed when everything is fully loaded.将它包裹在window.onload ，这样脚本只会在所有内容都完全加载时执行。
Try this example:试试这个例子：
window.onload = function () { $("#city").click(function() { alert('city'); }); $("#doctor").click(function() { alert('doctor'); }); }
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script> <button id="city">City</button> <button id="doctor">Doctor</button>
Explanation about window.onload from MDN: MDN 中关于window.onload解释：
The load event fires at the end of the document loading process.
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
For more idiomatic (in jquery) way, use the code below.对于更惯用的（在 jquery 中）方式，请使用下面的代码。 it's the same with window.onload . window.onload也是一样。
$(document).ready(function() {
// put code here
});
Another alternative, use $(function() { }) .另一种选择，使用$(function() { }) 。
$(function() {
// put code here
})
解决方案2
1 2016-08-29 12:50:25
Pros: With this approach, you don't have to wait for the 'load' event to trigger.. this should execute as soon as jQuery has finished loading.优点：使用这种方法，您不必等待 'load' 事件触发......这应该在 jQuery 完成加载后立即执行。
var initInterval = setInterval(function(){ if(window.jQuery) { clearInterval(initInterval); init(); // where init is the entry point for your code execution } }, 20); function init(){ $('#example').text('Ahoy!'); }
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script> <div id="example">Hi</div>
解决方案3
1 2022-05-04 03:57:43
This way you can add multiple functions to window.load :这样你就可以向window.load添加多个函数：
window.addEventListener("load",function(event) {
$("#city").click(function() {
alert('city');
});
},false);
window.addEventListener("load",function(){
$("#doctor").click(function() {
alert('doctor');
});
},false);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.