Solution to jquery's failure due to selector problems under ie7

  • 2020-12-05 17:05:12
  • OfStack

1, there is paragraph html 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 dynamically populate the content code under tbody with jquery as follows


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

This code has problems with ie7 and ie versions below, jquery cannot find the correct dom location and append content via #pending table tbody. The code that needs to be modified is as follows


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

Remove #pending and find dom directly via table tbody

3. When I was 1, I was very confused. Cascading selectors are very common, but why is this problem under ie7?

Please continue to add 1 below:

jquery using append in IE should be noted


$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      // in IE7 Cannot display under , No problem under Firefox... 
      $('#Content').append('<tr><td width="19%">  Product id </td><td width="15%"> The commodity name </td><td width="20%"> Supplier number </td><td width="30%"> Item Number </td><td width="10%"> The unit price </td></tr>');

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

Modification (as follows) :


$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      // The modified ... That should be all right , It can be seen that Jquery right html Tags are sensitive and need to be paid attention to in the future ........ )  
      var pageContent = '';  
       pageContent += '<table border="2">';
       pageContent += '<tr><td width="19%">  Product id </td><td width="15%"> The commodity name </td><td width="20%"> Supplier number </td><td width="30%"> Item Number </td><td width="10%"> The unit price </td></tr>';
       pageContent += '</table>';      
       $('#Content').append(pageContent );

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

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

The append method of jQuery does not support the resolution of HTML attributes such as connections

Very depressed, today I wrote the program, want to document object append1 some html up, such as < b > < p > None of this was a problem, but HTML with links like:


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

firefox has no problem, IE6, IE71 until IE8 can't survive, only display text content, without any connection. I prepared for Google1, but found that ES80en.com could not log in, and basically one page of the query on ES82en.cn was full of those junk articles from the collection station. I was very depressed. After a long time, I found an article, which said that jQuery itself append function is a problem, this function with its own HTML analysis and analysis of the statement, the basic html is no problem, when it comes to links or not completely closed tags or custom tags, jQuery will not be able to recognize. I don't know if this is true, the js library at hand is a compressed version, too late to look at the hard source code head also groggy. Insert the Create1 element of the a tag.


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

Then attach the following to the link:


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

Ah, tired not tired ah. Anyway, go to sleep, tomorrow free to see jQuery's source code is written.


Related articles: