The problem of IE7 selector in jquery leads to the solution of append failure _jquery

Source: Internet
Author: User
Tags html tags

1, there are such a section of HTML

Copy Code code as follows:

<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, I use jquery to dynamically populate the content code under Tbody as follows

Copy Code code as follows:

$ ("#pending table Tbody"). Empty (). append (Th). append (HTML);

This code is problematic in IE7 and the following IE versions, and jquery cannot find the correct DOM location and append content through the #pending table tbody. Need to modify, the modified code is as follows

Copy Code code as follows:

$ ("Table Tbody"). Empty (). append (Th). append (HTML);

Get rid of the #pending and get the DOM directly through table tbody.

3, I was very confused, the Cascade selector is very common, but under the IE7 why there is such a problem, is it a jquery bug or div under the nested table tbody HTML writing is not enough standard?

Let's go on to add:

Problems needing attention in using append in IE by jquery

$ (document). Ready (function () {
   $.ajax ({
     URL: ' cutepage.htm ',
     dataType: ' JSON ',
     data: ' Type=init &pagesize= ' + eachpage + ' &pageindex=1 ',
     success:function (msg) {

      //Can not be displayed under the IE7, no problem under Firefox ...
      $ (' #Content '). Append (' <tr><td width= "19%" > Item number </TD><TD width= "15%" > Product name </td> <TD width= "20%" > Supplier number </td><td width= "30%" > Product category number </TD><TD width= "10%" > Price </td> </tr> ');
    error:function (x) {alert ("Server error code:" + x.status); $ (' #Loading '). Hide (); }
   });
 });

Modified (as follows):

$ (document). Ready (function () {
   $.ajax ({
     URL: ' cutepage.htm ',
     dataType: ' JSON ',
     data: ' Type=init &pagesize= ' + eachpage + ' &pageindex=1 ',
     success:function (msg) {

      //modified ... (This will not be a problem, you can see that jquery is more sensitive to HTML tags, you need to pay attention later ...) ) 
      var pagecontent = ';  
       PageContent = ' <table border= ' 2 ' > ';
       PageContent + + <tr><td width= "19%" > Item number </TD><TD width= "15%" > Product name </TD><TD width= " 20% "> Supplier number </td><td width=" 30% "> Product category Number </TD><TD width=" > Unit price </td></tr> ";
       PageContent + = ' </table> ';      
       $ (' #Content '). Append (PageContent);

     },
    error:function (x) {alert ("Server error code:" + x.status); $ (' #Loading '). Hide (); }
   });
 });

is to copy the content to an argument and not to use HTML content directly.

JQuery's Append method does not support the resolution of HTML attributes such as joins

is very depressed, write the program today, want to append some HTML in the Document object, such as <b><p> these are completely no problem, but encountered with the link HTML such as:

Copy Code code as follows:

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

Firefox is no problem, IE6, IE7 has been to IE8 on the dead and alive, only display text content, without any connection. Ready to Google, but found Google.com has been unable to land, google.cn query out of the basically a page is the collection station of those rubbish articles, is very depressed. For a long time, to find an article, that is jquery's own append function of the problem, this function with similar HTML parsing and analysis of the statement, the basic HTML is no problem, hit the link or not completely closed the label or a custom label, jquery will not recognize the dead or alive. Do not know whether this is true, the JS library on hand is compressed version, too late head also sleepy don't want to see them source code. Create a tag directly by yourself insert the element into the well, do this:

Copy Code code as follows:

$ (document.createelement (' a ')). attr ({"href": "#", "id": ' #mylink '}). Appendto ("#test");

Then attach the content to this link:

Copy Code code as follows:

$ (' #mylink '). Text ("Test");

Hey, tired not tired ah. No matter, sleep, tomorrow is free to see the jquery source code is how to write it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.