[jQuery] toggleClass weird behaviour

[jQuery] toggleClass weird behaviour


Hey all!
I'm wondering why the following code will toggle the div 'divRed' to a
different color, but it won't toggle the color for 'divGreen'.
<style>
    div {height: 100px; width: 100px;}
    .divRed {background-color: red;}
    .divGray {background-color: gray;}
    .divGreen {background-color: green;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
    $(".divRed").click(function() { $(this).toggleClass("divGray"); });
    $(".divGreen").click(function() { $(this).toggleClass("divRed"); });
});
</script>
</head>
<body>
    <div class="divRed">test</div> <!-- Toggles background color -->
<div class="divGreen">test 2</div> <!-- Will not toggle background
color -->
</body>
The odd thing is that when I inspect the divs they both are updated by
jQuery and their classes are toggled, but the background color change will
only be for divRed and not divGreen
--
View this message in context: http://www.nabble.com/toggleClass-weird-behaviour-tp15350732s27240p15350732.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.