`
ronon
  • 浏览: 186367 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

JavaScript 元素的插入顺序以及动态加载js

阅读更多

*****************记录下今天的心得*****************



 

1.元素的插入顺序

需求:异步从后台读取两个数据a和b,并动态加载到父容器x中,要求a必须在b的左边

实际情况:一开始是用x.append(...)的方法将a、b添加进去,由于是异步加载,查询速度快的请求自然会先显示在页面中的左边,于是最终列表中,a、b是忽左忽右的。

解决办法:使用 a.prependTo(x) 函数,应该好理解,就是始终把a插入到x的最前面。

 

2.动态加载js

需求:页面加载完毕后,设置页面控件的一些属性。前端的同事做好的静态页面,是在html末尾加上该段代码

$(function(){
    $("[data-toggle='tooltip']").tooltip();
})
 

实际情况:页面上的dom元素都是通过jquery异步请求后台后动态加载的,以上代码在文档载入完毕就执行了,而此时页面的相关dom元素还未创建。

解决办法:想办法让这段代码在dom元素创建完毕后执行,于是想到了动态js,在</body>前增加一个div

<div id="div1"></div>

   在创建dom的jquery代码后,加上这一段

var scriptStr="$(function(){$(\"[data-toggle='tooltip']\").tooltip(); })";
$("#div1").html("<br><script>"+scriptStr+"<\/script>");
 

大功告成

 

  • 大小: 1.7 KB
分享到:
评论

相关推荐

    程序天下:JavaScript实例自学手册

    19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML...

    《程序天下:JavaScript实例自学手册》光盘源码

    19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML...

    源文件程序天下JAVASCRIPT实例自学手册

    5.5.2 插入和添加节点 5.5.3 复制节点 5.5.4 删除和替换节点 5.5.5 文本节点操作 5.6 对象的事件处理程序 5.7 浏览器兼容性策略 5.8 本章小结 第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用...

    JavaScript基础和实例代码

    5.5.2 插入和添加节点 5.5.3 复制节点 5.5.4 删除和替换节点 5.5.5 文本节点操作 5.6 对象的事件处理程序 5.7 浏览器兼容性策略 5.8 本章小结 第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用...

    JavaScript笔记

    用于颠倒数组中元素的顺序 17.Array元素操作: |--arr.push(x);向数组增加1个新元素x(位于数组最后位置) |--arr.splice(开始位置,删除几个[,x1,x2,x3...]) |--arr.indexOf(x) 返回x在数组中的下标---经常...

    精通正则表达式基于.NET ASP PHP JSP JavaScript

    StringBuilderApplication/DealWithStringBuilder.aspx 动态字符串处理 第9章(/09/) RegexApplication/Default.aspx 正则表达式类的应用 RegexApplication/GetPageHtmlData.aspx 获取网页的内容 ...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    微软JavaScript手册

    在“字母顺序的关键字列表”中,可以找到按字母顺序列出的所有 JScript 语言的主题。如果只需要查看某个主题(例如对象),则有对该主题进行详细说明的章节可供查阅。 如何操作呢?单击左边任意一个标题,即可显示...

    Javascript 实现广告后加载 可加载百度谷歌联盟广告 原创

     我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的。  那么怎么解决这种问题呢?先说...

    node-firebird:适用于Node.js的纯JavaScript和异步Firebird客户端

    适用于Node.js的纯JavaScript和异步Firebird客户端 Google网上上的。 社交网络上的Firebird数据库 版本v0.2.x的变更日志 添加了自动重新连接 添加 连接事件(附加,分离,行,结果,事务,提交,回滚,错误等) ...

    javascript入门笔记

    Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发...

    大名鼎鼎SWFUpload- Flash+JS 上传

    它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。  在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取...

    javascript文档

    javascript的官方文档 这些方便实用的信息将帮助您了解 JScript 的各个部分。 在“字母顺序的关键字列表”中,可以找到按字母顺序列出的所有 JScript 语言的主题。如果只需要查看某个主题(例如对象),则有对该主题...

    超实用的jQuery代码段

    3.14 如何为动态添加的元素绑定事件处理函数 3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3...

    include.js

    用于将封装的HTML代码块导入当前页面,只需要引入该js文件,即可轻松无缝插入代码块,和在一个页面写代码的效果一样,需要注意的是,因为加载顺序的问题,使用该js文件需要先引入jQuery。

    Birt中文手册.chm

    如何使用动态文本元素 格式化报告内容 如何创建样式 如何导入样式 如何应用样式 如何修改样式 如何删除样式 如何创建格式化规则 如何修改格式化规则 如何删除格式化规则 如何通过拖动边界来调整列或行的...

    HTML5与CSS3基础教程(第8版)高清文字

    3.15 为元素添加title属性 61 3.16 添加注释 62 第4章 文本 63 4.1 添加段落 63 4.2 指定细则 64 4.3 标记重要和强调的文本 65 4.4 创建图 67 4.5 指明引用或参考 69 4.6 引述文本 70 ...

    东方自助建站系统3.0(正版)

    自助建站系统3.0(正版) 企业建立网站是企业... 插入代码:如统计代码、广告代码、在线咨询等javascript代码  计数器管理:可设定计数器的初始数值  标题文字尺寸:修改网站名称的文字大小,使网站标题更美观

    pigeon-chart:一个动态工具以图表形式显示mysql结果

    在Pigeon Chart JavaScript之前,必须先加载jQuery,AngularJS,Highcharts和Underscore。 如果您的网站在PHP上运行,则只需将“ includes.php”文件插入PHP项目中,而不是一个接一个地插入JS文件。 “ includes....

Global site tag (gtag.js) - Google Analytics