jquery在ie7下选择器的问题导致append失效的解决方法


Posted in Javascript onJanuary 10, 2016

1,有如下这样一段html

<div class="right"id="pending"> 

 <table class="one"width="100%"border="0"cellspacing="0"cellpadding="0"> 

<tbody>

</tbody>

</table>

 <div id="pendingpage"class="paging"> 

</div>

</div>

 2,我用jquery动态填充tbody下的内容代码如下

$("#pending table tbody").empty().append(th).append(html);

 这段代码在ie7及以下ie版本会有问题,jquery无法通过#pending table tbody 找到正确的dom位置并append内容。需要修改,修改的代码如下

$("table tbody").empty().append(th).append(html);

 把#pending去掉 直接通过table tbody找dom

3,我一时很疑惑,级联的选择器很常见,但是在ie7下为什么有这种问题,难道是jquery的bug或者div下嵌套table tbody的html写法不够标准?

下面继续补充一下:

jquery在IE中使用append应注意的问题

$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //在IE7下无法显示,在火狐下没有问题。。。。。
      $('#Content').append('<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>');

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

修改(如下):

$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //修改后...(这样就没有问题了,可以看出Jquery对html标签是比较敏感的,以后需要注意........) 
      var pageContent = '';  
       pageContent += '<table border="2">';
       pageContent += '<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>';
       pageContent += '</table>';      
       $('#Content').append(pageContent );

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

就是将内容复制给一个参数,不要直接使用html内容。

jQuery的append方法不支持连接等HTML属性的解决

很是郁闷,今天写程序,想在文档对象中append一些html上去,诸如<b><p>这些完全没有问题,可是碰到了带链接的HTML如:

$("#test").append("<a href='#'>test</a>");

firefox毫无问题,IE6、IE7一直到IE8就死活上不去,只显示文本内容,不带任何连接。准备Google一下,却发现Google.com已然无法登陆,Google.cn上查询出来的基本上一页全是采集站的那些垃圾文章,很是郁闷。搞了半天,找到一篇文章,说是jQuery自身append函数的问题,这个函数自己带类似HTML解析和分析的语句,基本的html没问题,碰到链接或者未完全关闭的标签或者是自定义的标签,jQuery就死活认不出来。不知道是否真的如此,手头的js库是压缩版,太晚了头也昏昏沉沉不想再去看劳什子源代码了。直接自己Create一个a标签的元素插入进去好了,这样搞:

$(document.createElement(‘a')).attr({"href":"#", "id": ‘#mylink'}).appendTo("#test");

然后给这个链接附上内容:

$(‘#mylink').text("test");

哎,累不累啊。不管了,睡觉了,明天有空看看jQuery的源代码是怎么写的吧。
Javascript 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 #Javascript
JavaScript基础知识及常用方法总结
Jan 10 #Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 #Javascript
javascript实现checkbox复选框实例代码
Jan 10 #Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 #Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python按照多个条件排序的方法
2019/02/08 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
校班主任推荐信范文
2013/12/03 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
销售员岗位职责
2014/06/09 职场文书
装修施工安全责任书
2014/07/24 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
语文教师求职信范文
2015/03/20 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL