WordPress中QSM插件生成元素的JavaScript点击事件无法触发怎么解决？

问题根因 #

• document.querySelectorAll() 返回的是DOM元素集合（NodeList类型），不是单个元素，不能直接调用addEventListener方法或者直接赋值onclick属性，必须遍历集合中的每个元素单独绑定事件，这是你测试的所有代码都存在的语法错误。
• 「quiz master and survey」插件的内容是动态渲染生成的，window.onload触发时插件的DOM元素还没加载到页面中，绑定事件找不到对应元素自然无效。
• 其他可能：插件本身阻止了点击事件冒泡、目标元素被CSS设置了pointer-events: none属性导致点击事件被拦截。

最优解决方案（推荐） #

用事件委托机制，直接把事件绑定到已经存在的上层容器（比如document），不需要等待插件元素渲染，兼容性最好：

document.addEventListener('click', function(e) {
  // 匹配点击的元素是否为.qsm_check_answer或它的子元素
  if (e.target.closest('.qsm_check_answer')) {
    const correctInfo = document.querySelector('#correct-info');
    if (correctInfo) {
      correctInfo.classList.add('d-none');
      // 不需要bootstrap类的话替换为：correctInfo.style.display = 'none'
    }
  }
});

如果你的WordPress站点已经加载了jQuery，也可以用更简洁的写法：

jQuery(document).on('click', '.qsm_check_answer', function() {
  jQuery('#correct-info').hide();
});

备选方案（元素固定渲染的场景） #

如果确认插件元素是页面加载时同步渲染的，可以遍历NodeList单独绑定：

window.addEventListener('load', function() {
  // 可选添加300-500ms的短延迟适配插件的异步渲染
  setTimeout(() => {
    document.querySelectorAll('.qsm_check_answer').forEach(btn => {
      btn.addEventListener('click', function() {
        const correctInfo = document.querySelector('#correct-info');
        if (correctInfo) correctInfo.style.display = 'none';
      });
    });
  }, 300);
});

额外排查建议 #

• 打开浏览器控制台执行document.querySelectorAll('.qsm_check_answer').length，返回值大于0说明选择器有效，否则需要确认类名是否拼写正确
• 检查.qsm_check_answer元素的CSS属性，确保没有设置pointer-events: none

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