Home  >  Article  >  Web Front-end  >  Solution to the problem of jquery's selector under ie7 that causes append to fail_jquery

Solution to the problem of jquery's selector under ie7 that causes append to fail_jquery

WBOY
WBOYOriginal
2016-05-16 15:20:401256browse

1, there is a piece of html as follows

Copy code The code is as follows:

284774e381c812f48249ca70ec6ff891
b3cb001ffa23a62d3d148e67f026e3f1
92cee25da80fac49f6fb6eec5fd2c22a
ca745a59da05f784b8811374296574e1
f16b1740fad44fb09bfe928bcc527e08
020f20ce17f6305b909a1f285ba64f8f
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

2. I use jquery to dynamically fill in the content under tbody. The code is as follows

Copy code The code is as follows:

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

This code will have problems in ie7 and below ie versions. jquery cannot find the correct dom position and append the content through #pending table tbody. It needs to be modified. The modified code is as follows

Copy code The code is as follows:

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

Remove #pending and find dom directly through table tbody

3. I was confused for a while. Cascading selectors are very common, but why is there such a problem under IE7? Is it a jquery bug or the HTML writing method of nested table tbody under div is not standard enough?

Let me continue to add:

Things to note when using jquery append in IE

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

Modification (below):

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

Copy the content to a parameter, do not use html content directly.

jQuery’s append method does not support HTML attributes such as connections

I was very depressed. I was writing a program today and wanted to append some HTML to the document object, such as a4b561c25d9afb9ac8dc4d70affff419e388a4556c0f65e1904146cc1a846bee. These were no problem at all, but I encountered HTML with links such as:

Copy code The code is as follows:

$("#test").append("771ffaf5277073360b429b7cfaa0dd37test5db79b134e9f6b82c0b36e0489ee08ed");

There is no problem with firefox, but IE6, IE7 and IE8 are stuck, and only text content is displayed without any connections. I was preparing to Google, but I found that I could no longer log in to Google.com. Basically, the page I found on Google.cn was full of junk articles from collection sites, which was very depressing. After working on it for a long time, I found an article that said it was a problem with jQuery's own append function. This function has its own statements similar to HTML parsing and analysis. Basic HTML is fine, but it encounters links or tags that are not completely closed or are customized. Tags, jQuery just can't recognize them. I don’t know if this is really the case. The js library I have is a compressed version. It’s too late and my head is dizzy and I don’t want to look at the source code of Laoshizi anymore. Just create an element of the a tag and insert it directly, like this:

Copy code The code is as follows:

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

Then attach content to this link:

Copy code The code is as follows:

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

Hey, are you tired? No matter, I'm going to bed. If I have time tomorrow, let's take a look at how the source code of jQuery is written.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn