.removeClass() after .addClass() not working

Question

I have two class empty and colored. Once I clicked colored class then remove colored class and add empty class. Again I click on it it should be add colored class and remoce empty class. But it is't working.

            var color_click = false;
            var select_color = "";
            $( ".colored").on('click',function(e){
                if(color_click != true){
                    color_click = true;
                    select_color = $(this).css('background-color');
                    $(this).removeClass("colored");
                    $(this).addClass( "empty");
                    $(this).css('background-color','')
                }
            });


            $( ".empty").click(function(){
                if(color_click == true){
                    color_click = false;
                    $(this).css('background-color',select_color);
                    $(this).addClass("colored");
                    $(this).removeClass( "empty");

                }
            });

Answer 1

Yes. That is because you bind the event to that particular class. You can use event delegation to resolve the issue using on() . When your event binding happens there is no element with the class .empty and the binding has no effect. Instead of using the document head(as used in my example) use a container that exists in DOM all the time and holds this element. So with event delegation you are actually binding the event to a container/document head for delegation on the elements that are present in DOM now as well as for the future.

Apart from this i have made some changes to remove some ambiguous check and use chaining.

   $(document).on('click', ".colored", function(e){
            if(!color_click){ // You dont need this check if your variable is modified only in these 2 events
                color_click = true;
                select_color = $(this).css('background-color');
                $(this).removeClass("colored").addClass( "empty").css('background-color','');

            }
        });


        $( document).on('click', ".empty", function(){
            if(color_click){// You dont need this check if your variable is modified only in these 2 events
                color_click = false;
                $(this).addClass("colored").removeClass("empty").css('background-color',select_color);

            }
        });

Answer 2

You need to rebind the click handlers for the classes

Wrap it up in a function (eg bindClicks), and then call bindClicks() when you add new classes.

Answer 3

put the $(".empty").click code immediately after you assign the class to the element. On DOMReady this click handler does nothing, since there is no element with that class and when you change the class DOM Ready is not being called again. and vice versa.

    var color_click = false;
    var select_color = "";
    bindColor(); bindEmpty();
    function bindEmpty() {
        $(".empty").click(function () {
            if (color_click == true) {
                color_click = false;
                $(this).css('background-color', select_color);
                $(this).addClass("colored");
                $(this).removeClass("empty");
                bindColor();
            }
        });
    }
    function bindColor() {
        $(".colored").on('click', function (e) {
            if (color_click != true) {
                color_click = true;
                select_color = $(this).css('background-color');
                $(this).removeClass("colored");
                $(this).addClass("empty");
                $(this).css('background-color', '')
                bindEmpty()
            }
        });
    }