为何WordPress中Vanilla JS的addEventListener无法生效？

问题描述 #

已排查过代码错误类的同类问题，但本次情况特殊：

• jQuery绑定的点击事件可正常触发
• 原生JS绑定的点击事件毫无反应，控制台无任何错误提示
• 脚本已放在body底部，确保页面元素加载完成后执行

代码示例：

// jQuery - 正常运行
const openSearchButton = $(".js-search-trigger");
openSearchButton.on("click", () => console.log("hello"));

// Vanilla JS - 无法触发
const openSearchButton = document.querySelector(".js-search-trigger");
openSearchButton.addEventListener("click", () => console.log("Hello"));

排查方向与解决办法 #

1. 变量重复声明问题

代码中两次使用const声明同名变量openSearchButton，这会直接抛出语法错误。即便你说控制台无报错，也建议先修正变量名，避免作用域冲突：

// 修改原生JS的变量名
const openSearchBtn = document.querySelector(".js-search-trigger");
openSearchBtn.addEventListener("click", () => console.log("Hello"));

2. 多元素匹配时原生JS只绑定第一个

jQuery的$(".js-search-trigger")会选中所有匹配的元素并批量绑定事件，但document.querySelector仅返回第一个匹配的DOM元素。如果你点击的是页面中靠后的匹配元素，原生JS的绑定自然不会触发。

要给所有匹配元素绑定事件，改用document.querySelectorAll并遍历元素：

const openSearchButtons = document.querySelectorAll(".js-search-trigger");
openSearchButtons.forEach(button => {
  button.addEventListener("click", () => console.log("Hello"));
});

3. 动态生成元素的事件委托

如果目标元素是后续通过JS动态添加到页面中的，即便脚本放在body底部，querySelector也无法捕获到这些元素。此时需要用事件委托，把监听绑定到静态父元素上：

// 绑定到静态的body元素，监听子元素的点击
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".js-search-trigger")) {
    console.log("Hello");
  }
});

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