jQuery使addClass可以点击

Question

我有一个li,当点击时使用jQuery添加类"active":

$('li').click(function() {
    $(this).addClass('active');
});

然后,我希望再次单击它后删除该类:

 $('.active').click(function() {
    $(this).removeClass('active');
});

然而,点击没有任何反应,我想这是因为该类首先不存在,我使用$(document).ready();

有没有办法访问添加的变量,或者我错过了一些非常明显的东西,当点击添加的类时没有任何结果？

Answer 1

问题是因为.active类在运行时被修改,因此您无法在加载页面时将任何事件处理程序绑定到它.要解决此问题,您可以使用委派的事件处理程序:

$('ul').on('click', 'li', (function() {
  $(this).toggleClass('active');
});

请注意,这将替换问题代码中的两个事件处理程序.