添加删除类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"); 
});