jquery css class problem

Answer 1

You need to change the .bt1i handler to work via .live(), like this:

$(".bt1").live('click', function(){ 
//and...
$(".bt1i").live('click', function(){

When you do $(".bt1i").click(...) it's looking for elements with a class of bt1i at that time and binding a click handler to them...the elements you're toggling the class on didn't have the class then. With .live() it'll listen or elements with that class, no matter when they were added...the selector is evaluated at the time the event occurs.

As a side note if you want this to behave as expected, you need to toggle off the previous class as well, just add both to each .toggleClass() call, like this:

$(this).toggleClass("bt1 bt1i");

This will effectively swap the class on the element.

Answer 2

Nick's answer is correct. Here is just another solution:

$(".bt1").click(function () {
    if ($(this).hasClass("bt1i")) {
        // add behavior for the bt1i class here
    }
    $(this).toggleClass("bt1i");
}

The reason you are having the problem is because jQuery's .click() function binds the handler only to the items that currently have the bt1i class. Since the class will not be added until later, the handler doesn't get bound to anything.