动态生成列表中jQuery点击切换li的active类异常问题求助

修复方案 #

我们直接改掉内联事件的写法，用jQuery的事件委托（因为你的列表是动态生成的，事件委托最靠谱），这样逻辑清晰还不会出问题：

第一步：先修改HTML，去掉内联的onclick

<ul class="config-swatch-list">
  <li class='color'>
    <a href="#" style="background-color: random_val"></a>
  </li>
  <li class='color'>
    <a href="#" style="background-color: random_val"></a>
  </li>
  <li class='color'>
    <a href="#" style="background-color: random_val"></a>
  </li>
  <li class='color'>
    <a href="#" style="background-color: random_val"></a>
  </li>
  <li class='color'>
    <a href="#" style="background-color: random_val"></a>
  </li>
</ul>

第二步：替换JS代码，用事件委托实现切换逻辑

而且jQuery有个toggleClass()方法，能直接帮你实现“有这个类就移除，没有就添加”的逻辑，代码更简洁：

// 给父元素绑定事件，委托给子元素li.color，动态生成的元素也能生效
$('.config-swatch-list').on('click', '.color', function(e) {
  // 阻止a标签默认的跳转行为，避免页面刷新
  e.preventDefault();
  // 直接切换active类
  $(this).toggleClass('active');
  console.log('clicked');
});

为啥原来的代码会出问题？ #

当你第一次点击第一个li时，调用color_select()给#color元素（如果页面里刚好有id为color的元素，可能第一个li被误匹配了）绑定了一次click事件；第二次点击这个li时，先执行color_select()再绑定一次，然后触发之前绑定的事件，才切换了class。后面的li点击时，重复绑定的次数更多，就出现了需要双击才生效的情况。

换成事件委托后，就彻底避免了重复绑定的问题，不管是静态还是动态生成的li，点击都能正常切换class啦～

内容的提问来源于stack exchange，提问作者pyprism