Solve the append failure caused by jquery's selector problem in ie7, jqueryappend
1. There is such an html
Copy codeThe Code is 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 fill in the Content Code in tbody as follows:
Copy codeThe Code is as follows:
$ ("# Pending table tbody"). empty (). append (th). append (html );
This code may be problematic in ie 7 or earlier versions. jquery cannot find the correct dom location through # pending table tbody and append the content. The modified code is as follows:
Copy codeThe Code is as follows:
$ ("Table tbody"). empty (). append (th). append (html );
Remove # pending and use table tbody to find the dom.
3. I was wondering why cascading selectors are common in ie7. Is it because jquery's bug or the html Writing of nested table tbody in div is not standard enough?
I will continue to add the following:
Notes for jquery append in IE
$ (Document ). ready (function () {$. ajax ({url: 'cutepage.htm', dataType: 'json', data: 'Type = Init & PageSize = '+ EachPage +' & PageIndex = 1', success: function (msg) {// cannot be displayed under IE7, and there is no problem under Firefox ..... $ ('# Content '). append ('<tr> <td width = "19%"> product no. </td> <td width = "15%"> product name </td> <td width = "20% "> supplier id </td> <td width =" 30% "> product category id </td> <td width =" 10% "> unit price </td> </tr> ');}, error: function (x) {alert ("Server error Code:" + x. status); $ ('# Loading '). hide ();}});});
Modify (as follows ):
$ (Document ). ready (function () {$. ajax ({url: 'cutepage.htm', dataType: 'json', data: 'Type = Init & PageSize = '+ EachPage +' & PageIndex = 1', success: function (msg) {// after modification... (There is no problem. We can see that Jquery is sensitive to html tags. Pay attention to it later ........) var pageContent = ''; pageContent + = '<table border =" 2 "> '; pageContent + = '<tr> <td width = "19%"> product no. </td> <td width = "15%"> product name </td> <td width =" 20% "> supplier id </td> <td width =" 30% "> product category id </td> <td width =" 10% "> unit price </td>/ tr> '; pageContent + = '</table>'; $ ('# content '). append (pageContent) ;}, error: function (x) {alert ("Server error Code:" + x. status); $ ('# Loading '). hide ();}});});
That is, copy the content to a parameter and do not directly use html content.
JQuery's append method does not support connection and other HTML attributes.
I am very depressed. I am writing a program today and want to append some html in the Document Object. For example, <B> <p> there is no problem at all, but I encountered HTML with links, such:
Copy codeThe Code is as follows:
$ ("# Test"). append ("<a href = '#'> test </a> ");
There is no problem in firefox. IE6 and IE7 will not be able to live or die until IE8. They only display text content without any connection. After preparing for Google, I found that Google .com could not be logged on. The basic previous pages found on Google .cn were all junk articles from the collection site, which was very depressing. After half a day, I found an article about jQuery's append function. This function carries statements similar to HTML parsing and analysis. The basic html function is okay, jQuery does not recognize links, closed tags, or custom tags. I don't know if this is true. The js library at hand is a compressed version. It's too late to go back to the source code. Directly Create an element of the tag and insert it into it:
Copy codeThe Code is as follows:
$ (Document. createElement ('A ')). attr ({"href": "#", "id": '# mylink '}). appendTo ("# test ");
Add the following content to the link:
Copy codeThe Code is as follows:
$ ('# Mylink'). text ("test ");
Ah, tired. No matter what you do, go to bed and check out how jQuery's source code is written tomorrow.