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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
vue axios用法教程详解
Jul 23 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 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函数解决SQL injection
2006/12/09 PHP
php 注释规范
2012/03/29 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
传智播客学习之java 反射
2009/11/22 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python发送Email方法实例
2014/08/21 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python和js交互调用的方法
2020/06/23 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
工作业绩不及格检讨书
2014/10/28 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
离职信范文
2015/06/23 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS