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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
javascript每日必学之封装
Feb 23 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
python验证码识别的示例代码
2017/09/21 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
以下的初始化有什么区别
2013/12/16 面试题
什么是会话Bean
2015/05/14 面试题
行政部岗位职责范本
2014/03/13 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
疾病证明书
2015/06/19 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL