jQuery 使 addClass 可点击

Question

我有一个 li，单击时使用 jQuery 添加“active”类:

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

然后，我希望再次单击该类后将其删除:

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

但是单击时没有任何反应，我想这是因为该类一开始就不存在，我正在使用 $(document).ready();

是否有任何方法可以访问添加的变量，或者我是否遗漏了一些非常明显的东西，导致单击添加的类时什么也没有发生？

Answer 1

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

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

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