我有一个项目,其中所有的JS文件都在页脚中引用,建议用于页面加载的速度,包括指向Jquery文件的链接.这段代码产生一个"Uncaught ReferenceError",我假设因为在调用脚本之前尚未定义Jquery:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<p>
<a href="#" data-toggle="popover" title="first popover" id="example">hover over me</a>
</p>
<script type="text/javascript">
$(function(){
$('#example').popover({ trigger:'hover' });
})
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
如果我将Jquery链接移动到标题,那么代码运行正常,但这将减慢页面加载时间.
是否有更好的方法来声明我的函数,以便它不会抛出此UncaughtReference错误,或者保持头部中的Jquery链接是最佳解决方案？
bre*_*njt 16
这是因为你在加载jQuery前尝试使用jQuery.您需要将libs放在jQuery文档的头部
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
通常,您的脚本位于文档的末尾,靠近关闭的body标记和库,例如您正在使用的库 <head>
cpr*_*res 13
我喜欢将jquery保留在底部,你只需要确保首先加载整个DOM,并检查没有jQuery,因为它还不可用.请尝试使用此代码:
document.addEventListener("DOMContentLoaded", function(event) {
$(function(){
$('#example').popover({ trigger:'hover' });
});
});
在引用jQuery库之前,您需要包含jQuery.
改为:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
$('#example').popover({ trigger:'hover' });
});
</script>
另请注意,最好在文档的页脚中包含jQuery和其他JavaScript,以确保不会延迟页面呈现.