Home > Others

The jquery html () method cannot get dom changes in firefox.

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Jquery's html () method is used to obtain the innerHtml of an element. However, in firefox, if the value of some controls changes, such as the input value, the html () method of your element is used, the changed values cannot be obtained, or you must manually set the attribute of the element,

Add a method. The Code is as follows: Of course, you can directly use this method instead of the html () method.

Jquery's html () method is easy to implement. However, during the test, we found that in ie8 and I Firefox (including ie9, safari, and Google browsers), the values of html () are different.

The Code is as follows: Copy code

<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> untitled document </title>
<Script type = "text/javascript" src = "js/jquery. tools. min. js"> </script>
<Script>
Function save (){
Var content = $ ("# mytable" pai.html ();
Alert (content );
}
</Script>
</Head>

<Body>
<Table width = "100" border = "0" cellpadding = "0" cellspacing = "0" id = "mytable">
<Tbody>
<Tr>
<Td> <input type = "text" name = "textfield"> </td>
</Tr>
<Tr>
<Td> <input type = "button" name = "Submit" value = "save" onClick = "save ()"> </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>

The effect is as follows:

The result after clicking the button is as follows (note the place in my frame ):

Ie8

Ie9, Firefox

 

That is to say, the HTML obtained by FF only has the original code, excluding the content dynamically inserted. I don't want.

As for why, it may be the limitation of Firefox and other browsers? I really don't know. I am so grateful to anyone who can tell me what to do.

Now I can only try to solve this problem as soon as possible and fulfill the work requirements.

Solution

The Code is as follows: Copy code

JQuery html () in Firefox (uses. innerHTML) ignores DOM changes
Firefox doesn't update the value attribute of a DOM object based on user input, just its valueproperty-pretty quick work around exists.

(Function ($ ){
Var oldHTML = 2.16.fn.html;

$. Fn. formhtml = function (){
If (arguments. length) return oldHTML. apply (this, arguments );
$ ("Input, textarea, button", this). each (function (){
This. setAttribute ('value', this. value );
});
$ (": Radio,: checkbox", this). each (function (){
// Im not really even sure you need to do this for "checked"
// But what the heck, better safe than sorry
If (this. checked) this. setAttribute ('checked', 'checked ');
Else this. removeAttribute ('checked ');
});
$ ("Option", this). each (function (){
// Also not sure, but, better safe...
If (this. selected) this. setAttribute ('selected', 'selected ');
Else this. removeAttribute ('selected ');
});
Return oldHTML. apply (this );
};

// Optional to override real. html () if you want
// Pai.fn.html = $. fn. formhtml;
}) (JQuery );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
get method in html example get and post method in html examples get and post method in html how to use get method in html html form method get html get method example dom in html example

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More