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 相关文章推荐
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
Vue如何基于es6导入外部js文件
May 15 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
正则表达式语法
2006/10/09 Javascript
php自动加载机制的深入分析
2013/06/08 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python通过加号运算符操作列表的方法
2015/07/28 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python实现Floyd算法
2018/01/03 Python
Python Series从0开始索引的方法
2018/11/06 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
如何开启linux的ssh服务
2015/02/14 面试题
小学家长会邀请函
2014/01/23 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
推普周活动总结
2014/08/28 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript