.removeClass funktioniert nicht wie addClass?

Question

Verzeihen Sie mir, ein Noob zu sein, aber sollte das nicht funktionieren?

$(document).ready(function() { 
    $('.button').click(function() { 
     $(this).addClass('button-clicked'); 
    }); 

    $('.button-clicked').click(function() { 
     $(this).removeClass('button-clicked'); 
    }); 

}); 

Sollte der zweite Klick nicht die Klasse entfernen und zurück zu .button bringen?

Hier ist es auf jsfiddle: http://jsfiddle.net/pXdwM/

Answer 1

nein, denn an dem Punkt, Sie zum zweiten click() ruft die Schaltfläche nicht „.Taste geklickt“ hat und daher Event-Handler nicht zugeordnet ist. Man könnte es umschreiben wie diese

$('.button').click(function() { 
    $(this).toggleClass('button-clicked'); 
}); 

oder live()

$('.button-clicked').live("click", function() { 
    $(this).removeClass('button-clicked'); 
}); 

Answer 2

verwenden Sie ein Ereignis mit Klasse zu jedem Element hinzufügen ‚.Taste geklickt‘, aber die Klasse gilt nicht, bis Sie tatsächlich klicken . Sie müssen also den zweiten Hörer in den ersten Rückruf bewegen, oder verwenden Sie die toggleClass Funktion:

$('.button').click(function() { 
    $(this).toggleClass('button-clicked'); 
});