jquery在ie7下選擇器的問題導致append失效的解決方法

更新時間：2016年01月10日 21:16:58 投稿：mdxy-dxy

這篇文章主要介紹了jquery在ie7下選擇器的問題導致append失效的解決方法

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動態(tài)填充tbody下的內(nèi)容代碼如下

復制代碼代碼如下:

$("#pending table tbody").empty().append(th).append(html);

這段代碼在ie7及以下ie版本會有問題，jquery無法通過#pending table tbody 找到正確的dom位置并append內(nèi)容。需要修改，修改的代碼如下

復制代碼代碼如下:

$("table tbody").empty().append(th).append(html);

把#pending去掉直接通過table tbody找dom

3，我一時很疑惑，級聯(lián)的選擇器很常見，但是在ie7下為什么有這種問題，難道是jquery的bug或者div下嵌套table tbody的html寫法不夠標準？

下面繼續(xù)補充一下：

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(); }
   });
 });

就是將內(nèi)容復制給一個參數(shù)，不要直接使用html內(nèi)容。

jQuery的append方法不支持連接等HTML屬性的解決

很是郁悶，今天寫程序，想在文檔對象中append一些html上去，諸如<b><p>這些完全沒有問題，可是碰到了帶鏈接的HTML如：

復制代碼代碼如下:

$("#test").append("<a href='#'>test</a>");

firefox毫無問題，IE6、IE7一直到IE8就死活上不去，只顯示文本內(nèi)容，不帶任何連接。準備Google一下，卻發(fā)現(xiàn)Google.com已然無法登陸，Google.cn上查詢出來的基本上一頁全是采集站的那些垃圾文章，很是郁悶。搞了半天，找到一篇文章，說是jQuery自身append函數(shù)的問題，這個函數(shù)自己帶類似HTML解析和分析的語句，基本的html沒問題，碰到鏈接或者未完全關閉的標簽或者是自定義的標簽，jQuery就死活認不出來。不知道是否真的如此，手頭的js庫是壓縮版，太晚了頭也昏昏沉沉不想再去看勞什子源代碼了。直接自己Create一個a標簽的元素插入進去好了，這樣搞：

復制代碼代碼如下:

$(document.createElement(‘a(chǎn)')).attr({"href":"#", "id": ‘#mylink'}).appendTo("#test");

然后給這個鏈接附上內(nèi)容：

復制代碼代碼如下:

$(‘#mylink').text("test");

哎，累不累啊。不管了，睡覺了，明天有空看看jQuery的源代碼是怎么寫的吧。

您可能感興趣的文章:

jQuery編寫網(wǎng)頁版2048小游戲
本文主要分享了jQuery編寫網(wǎng)頁版2048小游戲的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jquery實現(xiàn)對聯(lián)廣告的方法
這篇文章主要介紹了jquery實現(xiàn)對聯(lián)廣告的方法,以一個完整實例形式詳細分析了jQuery對聯(lián)廣告的樣式與功能實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下
2015-02-02
jQuery實現(xiàn)側邊導航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側邊導航欄以及滑動電梯效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試
2022-03-03
3分鐘寫出來的Jquery版checkbox全選反選功能
checkbox全選反選的文章在以前也有介紹很多，實在是不想在提起了，然而身邊還是有些朋友不會，于是3分鐘寫出來一個估計有很多bug
2013-10-10
jQuery實現(xiàn)的圖文高亮滾動切換特效實例
這篇文章主要介紹了jQuery實現(xiàn)的圖文高亮滾動切換特效,涉及jquery基于鼠標事件針對頁面元素遍歷與動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
jQuery實現(xiàn)簡單的回到頂部totop功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的回到頂部totop功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
jquery中綁定事件的異同
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點和相同點，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jquery實現(xiàn)右鍵菜單插件
本文給大家分享的是使用jquery實現(xiàn)模擬右鍵菜單插件的方法和代碼分享，十分的實用，有需要的小伙伴可以參考下。
2015-03-03
jQuery中用on綁定事件時需注意的事項
本篇文章主要介紹了jQuery中用on綁定事件時需注意的事項，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
BootStrap 可編輯表Table格
這篇文章主要介紹了BootStrap 可編輯表格的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11