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获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python的Template使用指南
2014/09/11 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
经典C++面试题一
2016/11/06 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
运动会表扬稿大全
2014/01/16 职场文书
后备干部考察材料
2014/02/12 职场文书
个人委托书范本
2014/09/13 职场文书
解除同居协议书
2015/01/29 职场文书
小学教师求职信范文
2015/03/20 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python