CODEWITHSUNDEEP
jquery
user1054190
user1054190

Reputation: 1

jQuery removeClass onload doesn't work in IE7

I am trying to use removeClass() to remove an existing class in my html which works fine in IE8 and firefox but fails in IE7. When I see the source in IE7, the class still exists. Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> 
<head>
    <script type="text/javascript" src="common/js/libs/jquery/jquery-1.3.2.js" ></script>
    <script type="text/javascript">
        $(function(){
            $('#testdiv p').removeClass('testclass')
        });
    </script>
</head>
<body>
    <div id="testdiv">
        <p class="testclass">This is some test. on pageload, the class should be removed.</p>
    </div>
</body>
</html>

When I see the source in IE7, I still see the class: IE7 Rendered: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> 
<head>
    <script type="text/javascript" src="common/js/libs/jquery/jquery-1.3.2.js" ></script>
    <script type="text/javascript">
        $(function(){
            $('#testdiv p').removeClass('testclass')
        });
    </script>
</head>
<body>
    <div id="testdiv">
        <p class="testclass">This is some test. on pageload, the class should be removed.</p>
    </div>
</body>
</html>

Upvotes: 0

Views: 484

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

This is entriely correct. jQuery changes the DOM (Document Object Model) which the browser renders to the screen, which is based on the source. The source itself never changes.

To see the contents of the DOM use the Firebug extension for Firefox, or in IE press F12 to open developer tools. There are other ways of seeing the DOM in other browsers, but those are the two most common ways.

Upvotes: 0

Tim B James
Tim B James

Reputation: 20364

Viewing the page source is different from actually inspecting the changes made to the DOM.

If you want to view changes made via jQuery, Inspect the DOM with your browsers built in DOM inspector.

Right click in most browsers, F12 in IE7/8/9, FireBug in FireFox.

Upvotes: 1

Related Questions