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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
详解小程序循环require之坑
Mar 08 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
用PHP将数据导入到Foxmail
2006/10/09 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
微信小程序-API接口安全详解
2019/07/16 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
详解Python中的文本处理
2015/04/11 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
存储过程和sql语句的优缺点
2014/07/02 面试题
领导视察欢迎词
2014/01/15 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
文员岗位职责范本
2014/03/08 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js