Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同
我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去。 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需要注意的是 通过ajax动态加载Html元素到页面Dom 和 浏览器访问页面时加载页面Dom 时javascript的执行顺序是有所不同的。
我们先来看一个Html页面的代码,这个页面会通过ajax去Web服务器获取一段Html代码片段并通过javascript加载到页面的Dom结构中去,我们把这个Html页面在本文中称作主页面:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
alert("Main_1>>" + "主页面script标签开始加载"); alert("Main_2>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer")); $(function () {
alert("Main_4>>" + "主页面document.ready执行");
alert("Main_5>>" + ($("#htmlContainer").length > 0 ? "主页面找到htmlContainer" : "主页面未找到htmlContainer")); $.ajax({
url: "PartialHtmlPage.html",
data: null,
type: "GET",
contentType: "text/html",
success: function (result) {
alert("Main_6>>" + "主页面ajax已经获取到部分页html代码,开始加载部分页的html代码到主页面dom结构");
$("#htmlContainer").html(result);
alert("Main_7>>" + "主页面加载部分页html代码到主页面dom结构完毕");
},
error: function (result) {
alert(result.statusText);
}
});
}) alert("Main_3>>" + "主页面script标签加载完毕");
</script>
</head>
<body>
<div id="htmlContainer"> </div>
</body>
</html>
我们在页面中的一些关键位置用alert打出了一些信息以表示当前页面执行到什么地方了,并通过数字标注了alert执行时的顺序。我们执行页面后会发现在主页面中,当用浏览器去访问页面通过常规方式加载页面Dom结构时,上面代码中执行到script标签时,script标签下的Html元素都还没有加载到Dom结构里面去,因为上面第10行代码显示的是 主页面未找到htmlContainer 。而且jquery中的document.ready事件是在整个页面的Dom结构生成完毕后才会被执行,因为第14行代码显示的是 主页面找到htmlContainer ,并且第13行代码要后于32行代码执行,说明当执行到13行代码的时候,整个页面的Html标签都已经加载完毕了。
我们再来看看主页面ajax方法获取到的Html代码片段(PartialHtmlPage.html),我们把Html代码片段在本文中称作部分页:
<script type="text/javascript">
alert("Partail_1>>"+"部分页script标签开始加载");
alert("Partail_2>>" + ($("#partialPageDiv").length > 0 ? "部分页找到partialPageDiv" : "部分页未找到partialPageDiv")); $(function () {
alert("Partail_3>>" + "部分页document.ready执行");
}); alert("Partail_4>>" + "部分页script标签加载完毕");
</script>
<div id="partialPageDiv">
测试div,看使用ajax动态加载html到页面dom里面时,js是否能够找到这个div
</div>
上面部分页的代码会在主页面第23行代码被加载到主页面Dom结构中去,大家可以观察下部分页alert弹出信息的顺序,我们来看看和主页面加载Dom结构时有什么不同。当执行到部分页的script标签时,script标签下的Html元素都已经被加载到Dom结构里面去了,因为上面部分页第3行代码显示的是 部分页找到partialPageDiv 。部分页中jquery的document.ready事件在部分页的Dom结构生成完毕前就被执行了,因为上面部分页第6行代码要先于第9行代码执行,实际上在部分页中调用 $(function () {})时里面的function就被立即执行了,而不是像主页面一样要等整个页面的Dom结构加载完毕后才执行。
请大家通过javascript动态获取Html片段加载到页面Dom结构时要注意上面两个问题,否则很容易引起一些不必要的Bug。
Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同的更多相关文章
- js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
- jquery:为动态加载的元素绑定事件
最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...
- 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- JavaScript动态加载资源【js|css】示例代码
在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...
随机推荐
- CentOS7 + linux kernel 3.10.94 compile 简记
Linux kernel 一直以其开源著称,可以自己编译选择合适的模块,针对特定的系统可以有不同的编译选项 来源 此次编译的内核版本为3.10.94,从官网www.kernel.org下载而来,自己虚 ...
- 【C++】运算符重载
运算符重载,主要是简化类类型运算,能够让我们对类对象直接用运算符进行运算.基本语法: 类型 operator 运算符(参数列表){ ... } Complex operator+(Complex va ...
- linux关机
init 0; init是所有进程的祖先﹐它的进程号始终为1﹐所以发送TERM信号给init会终止所有的用户进程﹑守护进程等.shutdown 就是使用这种机制.init定义了8个运行级别(runle ...
- 搜索框UISearchController的使用(iOS8.0以后替代UISearchBar + UISearchDisplayController)
1.searchResultsUpdater:设置显示搜索结果的控制器 ? 1 _mySearchController.searchResultsUpdater = self; 2.dimsB ...
- Shell数组的增删改查
Shell数组的增删改查 shell数组的定义及取值: a=(1 2 3) [root@bogon tmp]# echo ${a[*]} 1 2 3 [root@bogon tmp]# echo $ ...
- zabbix配置发送报警邮件
配置邮件分为两种情况: 第一种:使用远端邮件服务器发送报警邮件 Linux系统版本:CentOS6.5-64 下载mailx: http://nchc.dl.sourceforge.net/proje ...
- 30天,O2O速成攻略【8.22北京站】
活动概况 时间:2015年8月22日13:30-16:30 地点:车库咖啡(北京市海淀西大街48号鑫鼎宾馆二层) 主办:APICloud.融云.品读者 网址:www.apicloud.com 费用:免 ...
- php 表单提交
<?php header("Content-Type:text/html; charset=utf8"); class config{ public static funct ...
- python_模块
1. 模块的导入 (1) python中import module时,系统通常在哪些路径下面查找模块? 在以下的路径查找模块:sys.path 如果你模块所在的目录,不在sys.path的目录下,可以 ...
- [RGEOS]绘制多边形Polygon
绘制OGIS定义的Polygon public void DrawPolygon(Polygon pol, Brush brush, Pen pen, bool clip) { gc = Graphi ...