Question

我无法解决这个问题以及我在网上发现的大量信息：

在我的项目中，JQuery加载了“defer”。由于项目标准，我无法改变。

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

现在我需要在页面中添加一些小函数（当前是内联的）：

使用此设置，浏览器将尝试在jQuery加载=>之前执行内联脚本; “未捕获的ReferenceError：$未定义”

<body>
...
...
<script>
  $("#city").change(function() {...some stuff...};
  $("#doctor").change(function() {...some stuff...};
</script>
</body>

解决这个问题的聪明方法是什么？

Answer 1

将其包装在window.onload内，因此当所有内容都完全加载时，脚本将被执行。

window.onload = function () {
    $("#city").change(function() { /* ...some stuff... */ });
    $("#doctor").change(function() { /* ...some stuff... */ });
}

关于来自MDN的window.onload的解释：

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子帧都已完成加载。

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

试试这个例子：

＆＃13;

window.onload = function () {
	$("#city").click(function() {
		alert('city');
	});
	$("#doctor").click(function() {
		alert('doctor');
	});
}

＆＃13;

<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>

＆＃13;

Answer 2

优点：使用这种方法，您不必等待“加载”。要触发的事件..这应该在jQuery完成加载后立即执行。

＆＃13;

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

＆＃13;

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>

<div id="example">Hi</div>

＆＃13;

JQuery：延迟加载JQuery和'$ not defined'

2 个答案: