添加刪除類jquery不工作

Question

我使用簡單的jquery addClass和removeClass函數來切換點擊類的div類，但它不工作。它的第一次工作，但第二次不工作。

這裏是的jsfiddle鏈接http://jsfiddle.net/chirag007/3xees0j8/

這裏是jQuery代碼。

$(".open-menu").click(function (e) { 
    $(".open-menu").addClass("close-menu1"); 
    $(".open-menu").removeClass("open-menu"); 
}); 

    $(".close-menu1").click(function (e1) { 
     $(".close-menu1").addClass("open-menu"); 
     $(".close-menu").removeClass("close-menu1"); 
}); 

感謝您的幫助..

Answer 1

，因爲你不使用delegation它不工作。

jQuery的連接到這對DOM類（open-menu）準備（這就是爲什麼第一次點擊是工作）的elemnts，但上課的時候（close-menu）連接後動態地將其不具備功能附加到事件like here。

嘗試

$(document).on("click", "<selector>", function(){ 
.... 
}); 

see updated fiddle

Answer 2

close-menu1沒有對你所創建的單擊事件處理程序的時間存在。

您可以將此更改爲代表修復解決方案，但更清晰的解決方案將是從未刪除的元素上有一個類，然後檢測在單個事件處理程序中應用了哪些其他類。

<div class="toggle-menu open-menu">menu</div> 

$(".toggle-menu").click(function (e) { 

    var $this = $(this); 

    if ($this.hasClass("open-menu")){ 

     $this.addClass("close-menu1") 
      .removeClass("open-menu");   
    } 
    else 
    { 
     $this.addClass("open-menu") 
       .removeClass("close-menu1"); 
    }  

    e.stopPropagation(); 
}); 

Answer 3

使用event delegation和toggleClass jQuery的

$(document).on("click", ".toggle-menu" ,function (e) { 

    $(this).toggleClass("open-menu close-menu1"); 

}); 

DEMO

Answer 4

試試這個 http://jsfiddle.net/s7hmv6kq/

$("body").on('click','.open-menu',function (e) { alert('b'); 
    $(".open-menu").addClass("close-menu1"); 
    $(".open-menu").removeClass("open-menu"); 
}); 

$("body").on('click','.close-menu1',function (e1) {alert('a'); 
    $(".close-menu1").addClass("open-menu"); 
    $(".close-menu1").removeClass("close-menu1"); 
});