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 相关文章推荐
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
JS中min函数实例讲解
Feb 18 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
实用函数3
2007/11/08 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php检查页面是否被百度收录
2015/10/28 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
销售经理岗位职责
2015/01/31 职场文书
个人催款函范文
2015/06/24 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android