jQuery点击字母间距功能失效，如何给激活后元素绑定事件？

原代码失效原因 #

1. 初始选择器无效：页面加载时，目标<a>元素还未添加active和play类，$('a.single-item__cover.active.play')无法找到对应元素，事件绑定在空集合上自然不会触发。
2. 事件类型错误：<a>标签不支持change事件，该事件仅适用于表单控件（如input、select），即便元素存在，事件也无法触发。

解决方案 #

方式一：监听元素类属性变化（推荐）

使用MutationObserver监听元素的class属性变化，当元素同时拥有active和play类时执行逻辑：

// 获取基础元素（无需初始具备active/play类）
const $featured = $('a.single-item__cover');

$featured.each(function() {
  // 创建观察者实例
  const classObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 确认是class属性变化，且元素已激活
      if (mutation.attributeName === 'class' && $(this).hasClass('active') && $(this).hasClass('play')) {
        console.log('working fine');
        // 若只需执行一次，可在此停止监听：classObserver.disconnect();
      }
    });
  });

  // 配置监听规则：仅监听class属性变化
  classObserver.observe(this, { attributes: true, attributeFilter: ['class'] });
});

方式二：在触发类变化的源头检查

如果知道是某个操作（比如点击）触发了类的添加，可直接在该操作的事件中检查元素状态：

// 假设是点击元素本身触发类变化
$('a.single-item__cover').on('click', function() {
  // 加微小延迟确保类已完成添加（若类是异步添加则需要）
  setTimeout(() => {
    if ($(this).hasClass('active') && $(this).hasClass('play')) {
      console.log('working fine');
    }
  }, 10);
});

// 若类是由其他元素触发添加（如父容器点击）
$('.trigger-element').on('click', function() {
  const $target = $('a.single-item__cover');
  setTimeout(() => {
    if ($target.hasClass('active') && $target.hasClass('play')) {
      console.log('working fine');
    }
  }, 10);
});

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