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实现动态CSS换肤技术的脚本
Jun 29 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
实例解析Array和String方法
Dec 14 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
jQuery返回定位插件详解
May 15 jQuery
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
Javascript删除数组里的某个元素
Feb 28 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 设计模式之 工厂模式
2008/12/19 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python标准库与第三方库详解
2014/07/22 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
《雪地里的小画家》教学反思
2014/02/22 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
董事长助理工作职责
2014/06/08 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS