Javascript .addClass（）之后的.removeClass（）不工作

我有两个班，一个是空的，一个是彩色的。单击有色类后，删除有色类并添加空类。我再次点击它，它应该是添加彩色类和删除空类。但它不起作用

            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");

                }
            });

---

您需要重新绑定类的单击处理程序

---

将其封装在函数中（例如bindClicks），然后在添加新类时调用bindClicks（）。这是因为您将事件绑定到该特定类。您可以使用事件委派来使用解决问题。当事件绑定发生时，没有类为

.empty

的元素，绑定无效。不要使用文档头（在我的示例中使用），而是使用一直存在于DOM中并保存此元素的容器。因此，通过事件委派，您实际上是将事件绑定到容器/文档头，以便对DOM中现在和将来存在的元素进行委派

除此之外，我还做了一些更改，以删除一些不明确的检查和使用链接

   $(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);

            }
        });

放置

$（“.empty”）。将类分配给元素后，立即单击
代码。在DOMReady上，这个click处理程序什么都不做，因为该类没有元素，并且当您更改类时，DOMReady不会再次被调用。反之亦然

    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()
            }
        });
    }

您可能需要在
addClass
之后再次添加事件处理程序，谢谢。我从你那里得到了主意。@MANGALAEDISINGH问题是
color\u单击
是否仅在该函数中设置此选项？