Question

I have this super simple jQuery script that I’m having trouble getting to work. I’m certainly missing something as I’ve done things exactly like this before with no problem.

Codepen link: http://codepen.io/jimmykup/full/pjJhC

$("div.minimize").click(function() {

    alert("Changing to RED");
    $(this).removeClass('minimize');
    $(this).addClass('maximize');

});

$("div.maximized").click(function() {

    alert("Changing to BLUE");
    $(this).removeClass('maximize');
    $(this).addClass('minimize');

});

The problem is that once my <div>‘s class has been changed to .maximize the jQuery continues to run as if the class is still .minimize.

Answer 1

Changing the class of an element doesn’t change which events are bound to it. You can however accomplish this using delegated events since with delegated events, the event is bound to a parent element that looks for matching child elements.

$(document).on("click","div.minimize",function() {

    alert("Changing to RED");
    $(this).removeClass('minimize').addClass('maximize');

});

$(document).on("click","div.maximized",function() {

    alert("Changing to BLUE");
    $(this).removeClass('maximize').addClass('minimize');

});

or better yet, a single event.

$("div.minimize,div.maximize").click(function(){
    if ($(this).is(".minimize")) {
        alert("Changing to RED");
        $(this).removeClass('minimize').addClass('maximize');
    }
    else {
        alert("Changing to BLUE");
        $(this).removeClass('maximize').addClass('minimize');
    }
});

or even better than that,

$("div.minimize,div.maximize").click(function(){
    alert("Changing to " + $(this).is(".minimize") ? "RED" : "BLUE");
    $(this).toggleClass('maximize minimize');
});