Question

I have the following jQuery code which is suppose to switch between classes on click. The code works on the first click but once I click on the same element for the second time it never switches to the opposite class. What am I doing wrong?

// enable on click
$('.disabled').click(function(event)
{
     $(this).removeClass("disabled").addClass("enabled");
     $(this).html("enabled");
});


// disable on click 
$('.enabled').click(function(event)
{
     $(this).removeClass("enabled").addClass("disabled");
     $(this).html("disabled");
});

Answer 1

You have to use the live method if you want to define events for future elements. The bind method only attaches events to the current elements which match the selector

An alternative method:

// Select all elements which should be affected, attach a click function:
$(".enabled, .disabled").click(function(){
    var $this = $(this);
    $this.toggleClass("enabled disabled");     // Toggle class

    var isEnabled = $this.hasClass("enabled"); // Get toggle state
    if (isEnabled) {                           // Example
        $this.text("enabled");
    } else {
        $this.text("disabled");
    }
});