Use the newest live () method added in 1.3 version of jQuery library [1].
$(document).ready(function() {
$('.large').live("click", function(){
.......
and
$(document).ready(function() {
$('.small').live("click", function(){
......
[1] http://docs.jquery.com/Events/live
Maurício
-----Mensagem Original-----
De: "Larry" <malariastamps@gmail.com>
Para: "jQuery (English)" <jquery-en@googlegroups.com>
Enviada em: quarta-feira, 25 de fevereiro de 2009 12:53
Assunto: [jQuery] Issue with addClass and removeClass
>
> Below is my complete page. I have two divs, one with class 'large' and
> one with class 'small'. When you click on the div with the 'small'
> class, I want to change it to 'large' and vice versa. The classes seem
> to change as I alert() the small or large class values and they seem
> correct BUT the div seems to stay bound to the original click function
> even though the div should/does not have the small class anymore,
> the .small.clcik event is getting called. Any help would be
> appreciated. I am sure I am missign something real easy!?
>
> Thank you, Larry
>
>
> <html>
> <head>
> <style type="text/css">
> .large { font-size:36px; }
> .small { font-size:16px; }
> </style>
>
> <title>jQuery Class Add/Remove Test</title>
>
> <script type="text/javascript" src="jquery-1.3.2.js"></script>
>
> <script type="text/javascript">
> $(document).ready(function() {
>
> $('.large').click(function(){
> alert(".large.click()");
>
> alert("large (should be true) = " + $(this).hasClass("large"));
> alert("small (should be false) = " + $(this).hasClass("small"));
>
> $(this).removeClass("large");
> $(this).addClass("small");
>
> $(this).html("I am now small - click to make large");
>
> return false;
> });
>
> $('.small').click(function(){
> alert(".small.click()");
>
> alert("large (should be false) = " + $(this).hasClass("large"));
> alert("small (should be true) = " + $(this).hasClass("small"));
>
> $(this).removeClass("small");
> $(this).addClass("large");
>
> $(this).html("I am now large - click to make small");
> return false;
> });
> });
> </script>
> </head>
>
> <body>
> <div id="div1" class="large">I am large - click to make small</div>
> <div id="div2" class="small">I am small - click to make large</div>
> </body>
> </html>
No comments:
Post a Comment