[jQuery] clicking div with text changes class in IE & FF, but clicking dropdown doesn't change class in IE
<div>Hi- I am new to jQuery (using v 1.2.3) and am having a blast. (The book Learning jQuery has been particularly helpful.) If I want to change a class by clicking it works fine in IE and FF with a clickable div of text. However, when I try to change a class by clicking a dropdown it works in Firefox, but not IE. Same javascript, same CSS, only difference is using dropdown instead of a clickable div. </div>
<div>Example Code#1:</div>
<div>This works in both IE and Firefox:</div>
<div> </div>
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>A Christmas Carol</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#switcher-narrow').bind('click', function() {
$('body').removeClass().addClass('narrow');
});
});
$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').removeClass().addClass('large');
});
});
$(document).ready(function() {
$('#switcher-normal').bind('click', function() {
$('body').removeClass();
});
});
</script>
<style type="text/css">
body.large #container .chapter {
font-size: 1.5em;
}
body.narrow #container .chapter {
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<div id="switcher">
<h3>Style Switcher</h3>
<div id="switcher-normal">Click here for Normal</div>
<div id="switcher-narrow">Click here for Narrow Column</div>
<div id="switcher-large">Click here for Large Print</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.
</div>
</div>
</body>
</html></div>
<div> </div>
<div>****Example Code#2: Following, using dropdown, ONLY works in Firefox and not in Internet Explorer (IE):****</div>
<div> </div>
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>A Christmas Carol</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#switcher-narrow').bind('click', function() {
$('body').removeClass().addClass('narrow');
});
});
$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').removeClass().addClass('large');
});
});
$(document).ready(function() {
$('#switcher-normal').bind('click', function() {
$('body').removeClass();
});
});
</script>
<style type="text/css">
body.large #container .chapter {
font-size: 1.5em;
}
body.narrow #container .chapter {
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<h3>Style Switcher</h3>
<select size="1" id="switcher">
<option >--- Choose one ---</option>
<option id="switcher-normal" >Select for Normal</option>
<option id="switcher-narrow">Select for Narrow Column</option>
<option id="switcher-large">Select for Large Print</option>
</select>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.
</div>
</div>
</body>
</html></div>
<div> </div>
<div>The only difference (I think!) is using a dropdown. What am I doing wrong? Any help would be appreciated.</div>
<div> </div>
<div>Thanks,</div>
<div>Michael</div>