.removeClass（）.addClass（）不工作后

Question

我有两个类是空的和有颜色的。一旦我点击彩色班级，然后删除彩色班级并添加空班级。我再次点击它应该添加有色类并远离空课程。但它没有工作。

  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

是的。那是因为你将事件绑定到特定的类。您可以使用事件委派来解决问题，使用on()。当事件绑定发生时，类.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); 

      } 
     }); 

Answer 2

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

的功能（如bindClicks）把它包起来，然后调用bindClicks（）当你添加新的类。

Answer 3

在将类指定给元素后立即放入$(".empty").click代码。在DOMReady上，这个点击处理程序什么都不做，因为没有该类的元素，并且当您更改类DOM就绪不会再次被调用时。反之亦然。

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