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