我们有时会通过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文档结构时执行顺序的不同的更多相关文章

  1. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

  2. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  3. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  4. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  5. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  6. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  7. jquery:为动态加载的元素绑定事件

    最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...

  8. 移动端，ajax 动态加载的元素，为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  9. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

随机推荐

  1. ASINetworkQueue 队列下载

    我们通过一个例子介绍一下请求队列使用,我们设计了一个应用,用户点击GO按钮从服务器同时下载两张图片显示在画面中. 我们直接看看主视图控制器ViewController.h代码如下: #import “ ...

  2. notepad++的环境变量

    notepad++的环境变量:当前目录:$(CURRENT_DIRECTORY) cmd /k cd /d $(CURRENT_DIRECTORY)文件名:$(NAME_PART)路径名:$(CURR ...

  3. 30天，O2O速成攻略【7.19深圳站】

    活动概况 时间:2015年07月19日13:30-16:30 地点:深圳腾讯大厦(南山区科技园科技中一路)2楼多功能厅 主办:APICloud.OneAPM.连接科技 网址:www.apicloud. ...

  4. Inside Kolla - 01 简介

    简介 在 opencloud 2015 的会议上初次了解到 kolla 项目后,开始去了解和学习 kolla 的源代码和相关的知识.经过一段时间的了解,觉得 kolla 确实是一个很好的项目,它使用预 ...

  5. [BS-11] 关于RGB/ARGB颜色相关知识

    关于RGB/ARGB颜色相关知识 众所周知,自然界的颜色都是由红色R.绿色G.蓝色B三元色按不同比例混合而成,每种元色取值范围是0-255.iOS中图片的颜色分为2种:24位和32位. 1. 24位( ...

  6. python center, ljust, rjust

    例子 >>> s = "jihite" >>> s.center(, "*") '**jihite**' >>& ...

  7. 基于axis2框架的两种发布webservice的方法

    这次在中韩的产品定义平台的开发,有幸接触到了通过自己写webservice给其他系统调用的项目. 具体开发背景:这个平台做了几个查询接口都是,都是用servlet方式处理请求,而这边系统之间是通过we ...

  8. Better PostgreSQL datacenter schema

  9. PostgreSQL中字符串相关问题

    PostgreSQL的字符串类型有character.character varying和text的值.在使用character类型的时候, 它有自动填充空白的潜在影响,特别是在其它数据库(MySQL ...

  10. 如何在RedHat6(7) or CentOS6（7）上制作无依赖的PostgreSQL数据库的RPM包

    本文解决了源代码安装都需要先检查系统上是否安装了应用程序所依赖的软件包的烦恼,对源代码开发者也有一定的帮助.可以在该基础上进行适当的修改,以满足自己的要求. RedHat5 or CentOS5已经提 ...