解决easyUI中jquery.easyui.min.js报错:window.onload与$(function)的执行时机差异
本文介绍在easyUI开发中遇到jquery.easyui.min.js报错的解决方法。通过对比window.onload与$(function)的执行时机,指出前者等待所有资源加载完毕,后者仅等待DOM就绪。建议在导入easyUI库后使用window.onload避免脚本未加载完成的错误。
easyUI开发中的库引入与报错现象
easyUI作为jQuery的一个第三方插件,因其便捷性而广受欢迎。它整合了网页开发的核心要素:JavaScript逻辑、HTML结构与CSS样式。引入easyUI库后,开发者可直接复用内置代码,快速搭建网页基础框架。
项目初始化需先引入easyUI相关函数库:
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
以下是项目的具体代码配置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>欢迎来到后台管理界面</title>
<link rel="stylesheet" type="text/css" href="plugin/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css" />
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="plugin/easyloader.js"></script>
<script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
});
</script>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;">
<div>
<h1>拓胜公司后台管理系统</h1></div>
</div>
<div data-options="region:'south',split:true" style="height:60px;">
<div style="margin: auto; width: 400px ; padding: 20px; font-size: 20px;">Copyright ©拓胜公司 版权所有</div>
</div>
<div data-options="region:'west',title:'系统管理',split:true" style="width:240px;">
<div id="aa" class="easyui-accordion">
<div title="管理员管理" style="padding: 10px;">
<ul>
<li><a href="#">添加</a></li>
<li><a href="#">查看</a></li>
<li><a href="#">修改</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'编辑区 '" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" ">
<div title="添加 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
tab1
</div>
<div title="删除 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
tab2
</div>
</div>
</div>
</body>
</html>
尽管上述代码结构看似无误,但运行时会触发如下报错信息:

报错指向jquery.easyui.min.js库存在问题。鉴于该库由官方提供且经过测试,理论上不应存在此类错误。
经多次调试发现,在代码中加入alert(11)后,浏览器不再报错,JavaScript逻辑得以正常执行:
<script type="text/javascript">
$(function() {
alert(11);
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
});
</script>
若将jQuery代码替换为window.onload()形式,代码同样能保持正常运行:
<script type="text/javascript">
window.onload=function(){
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
}
</script>
window.onload与$(function)的执行时机差异
总结原因如下:
1、window.onload()与$(function(){})的执行区别
A) window.onload()需等待页面所有元素(包括DOM和JavaScript脚本)完全加载后,才执行内部函数。
B) $(function(){})仅在页面DOM元素加载完成后即执行内部函数,不等待JavaScript脚本加载。
2、由于开发easyUI项目时已预先导入JavaScript代码,若使用$(function(){}),此时JavaScript脚本可能尚未加载完毕,导致:
jquery.easyui.min.js库因依赖未就绪而报错。因此,在使用easyUI开发时,应避免使用$(function(){}),推荐改用window.onload()。
以上为easyUI开发中jquery.easyui.min.js报错问题的解决思路,供参考。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
