我有一个外部JS文件来管理我页面中的所有脚本。 我想在这个文件中写一些代码来检查是否加载了jquery插件并且(如果没有)加载它!
我尝试使用以下代码开始myScripts.js文件:
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
在我的index.html中
我这样做了:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<script src="myScripts.js"></script>
</head>
<body>
<button id="test">test</button>
<script>
$('#test').click( function() {
alert('clicked');
});
</script>
</body>
</html>
但它没有执行警告对话框。出了什么问题?
答案 0 :(得分:1)
在click
中附上$(document).ready
个事件,以确保在DOM
准备就绪时触发事件。
$(document).ready(function(){
$('#test').click( function() {
alert('clicked');
});
});
答案 1 :(得分:0)
当您使用script.it添加jquery文件时,它将不可用,因此您必须添加onload侦听器以检测它何时可用。
function fnjquery() {
$('#test').click( function() {
alert('clicked');
});
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
jqTag.onload = fnjquery;
headTag.appendChild(jqTag);
} else {
fnjquery();
}
答案 2 :(得分:0)
这是一个有效的Fiddle
function myJQueryCode() {
//Do stuff with jQuery
$('#test').click( function() {
alert('clicked');
});
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
jqTag.onload = myJQueryCode;
headTag.appendChild(jqTag);
} else {
myJQueryCode();
}
<button id="test">
click
</button>