添加删除类 jquery 不起作用答案

【问题标题】：add remove class jquery not working添加删除类 jquery 不起作用
【发布时间】：2014-10-22 07:56:49
【问题描述】：

我正在使用简单的 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");
});

感谢您的帮助..

【问题讨论】：

您知道，您可以改用toggleClass("open-menu close-menu1");。 jsfiddle.net/MelanciaUK/3xees0j8/5
由于您希望事件处理程序根据更改的类进行更改，因此您需要使用事件委托
在最后一行 $(".close-menu") 你的类是 close-menu1 而不是 close-menu。并且还需要使用委托

标签： jquery html

【解决方案1】：

它不起作用，因为您没有使用delegation。

jquery 附加到在 DOM 上准备好类 (open-menu) 的元素（这就是为什么第一次单击是工作的原因），但是当类 (close-menu) 附加时后来动态它没有附加到事件like here的函数。

试试

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

see updated fiddle

【讨论】：

感谢您的帮助

【解决方案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();
});

【讨论】：

感谢您的帮助

【解决方案3】：

在 jquery 中使用 event delegation 和 toggleClass

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

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

});

DEMO

【讨论】：

【解决方案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");
});

【讨论】：

感谢您的帮助